1
2つのボタンのいずれかをクリックすると、表示されるオーバーレイdivが表示されます。 1つのボタンをクリックすると、その要素が特定のZインデックスで表示され、同じ要素が再びクリックされると、その要素は再び非表示になります。しかし、要素が表示され、2番目のdivがクリックされた場合は、オーバーレイのz-indexを変更するだけです.2番目のボタンを再度クリックすると、オーバーレイが消えてしまいます。私はこれをIf ElseステートメントとjQueryで実現しようとしています。ここにコードがあります。オーバレイを表示させることはできますが、意図したとおりにZインデックスを消したり変更したりすることはできません。あなたが値になるようにZインデックスの値を設定しているあなたは、あなたのzインデックスZ-インデックス条件でdivを非表示にするElse-ifステートメント
$(".block").css("z-index", "+1");
の値をインクリメントしているあなたのラインで
$(document).ready(function() {
$(".dot").click(function(){
$(this).data("clicked", true);
});
$(".burgerMenu").click(function() {
$(this).data("clicked", true);
//Overlay Animation
if ($(this).data("clicked") && $(".block").is(":visible")) {
//alert("IT WORKS!");
$(".block").css("z-index", "+1");
} else if ($(this).data("clicked") && $(".block").is(":hidden")) {
$(".block").css("z-index", "+1");
$(".block").css("display", "block");
} else if ($(this).data("clicked") && $(".block").css("z-index") > "-1") {
$(".block").css("display", "none");
} else {
alert("Ah lads.");
}
});
});/* FAB SECTION */
.dot
{
position: absolute;
bottom: 100px;
left: 200px;
}
#fab {
position: absolute;
color: white;
font-size: 18px;
text-align: center;
width: 100px;
height: 100px;
background-color: #6eadea;
border-radius: 50%;
box-shadow: 6px 10px 18px #686868;
}
#plusContain {
position: relative;
width: 100%;
height: 100%;
}
#plus {
position: relative;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
/* DIALOGUE/MENU OVERLAY */
.block {
position: fixed;
width: 100%;
height: 100%;
top: 0;
background-color: red;
opacity: 0.8;
display: none;
z-index: -1;
}
/* BURGER MENU SECTION */
.burgerMenu {
position: absolute;
margin: auto;
height: 50px;
width: 50px;
cursor: pointer;
bottom: 10px;
}
.bar {
height: 6px;
width: 100%;
background-color: black;
}
#top {
position: relative;
top: 5px;
}
#middle {
position: relative;
top: 15px;
}
#bottom {
position: relative;
top: 25px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fab" class="dot dotDown">
<div id=plusContain class="fab rotate">
<div id="plus">+</div>
</div>
</div>
<!--MENU OVERLAY-->
<div id="overlay" class="block"></div>
<!--Burger-->
<div id="burger" class="burgerMenu">
<div id="top" class="bar barTop"></div>
<div id="middle" class="bar barMid"></div>
<div id="bottom" class="bar barBot"></div>
</div>
質問は何ですか？無関係なコードがなぜ私たちを助けてくれるのですか？単に問題を混乱させるだけで、問題がどこに集中するのかが難しくなります。これを[mcve]に変換します。オーバーレイがどこにあるのかは分かりません – charlietfl
謝罪、完了！ – Brian