为什么单击按钮时没有出现我的黑色叠加层？

Question

I am trying to create a pop-up window myself. I want my pop-up box to appear when the button is pressed and everything below to get darkened. However, when I press my button whole page hangs and no popup appears also.

If I remove the div which turns everything background black, my popup is working fine.

Here is my html code which has script tags inside

 let visible = false; $('#showBox').on('click', function(params) { if (visible) { $('.box').removeClass('boxVisible'); $('.blackenBackground').removeClass('boxVisible'); visible = false; } else { $('.box').addClass('boxVisible'); $('.blackenBackground').addClass('boxVisible'); visible = true; } })

 .box { background: pink; height: 500px; width: 500px; position: absolute; top: 50%; left: 50%; z-index: 3; transform: translate(-50%, -50%); border-radius: 1%; opacity: 0; transition: 0.4s; transition-timing-function: ease-out; }.boxVisible { opacity: 1; }.blackenBackground { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; background: black; opacity: 0; z-index: 2; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box"></div> <p>Some lorem text..... </p> <button id="showBox">Show Box</button> <!-- When I remove this popup box works perfectly but background isn't darkening and my page hangs --> <div class="blackenBackground"></div>

Answer 1

Your fixed position div is blocking mouse events. The opacity is 0 but the box is still technically visible, which catches the click and prevents the button from getting clicked.

Just make sure the box is completely hidden and it should work.

 let visible = false; $('#showBox').on('click', function (params) { if(visible){ $('.box').removeClass('boxVisible'); $('.blackenBackground').removeClass('boxVisible'); visible = false; }else{ $('.box').addClass('boxVisible'); $('.blackenBackground').addClass('boxVisible'); visible = true; } })

 .box{ background: pink; height: 500px; width: 500px; position: absolute; top: 50%; left: 50%; z-index: 3; transform: translate(-50%, -50%); border-radius: 1%; opacity: 0; transition: 0.4s; transition-timing-function: ease-out; }.boxVisible{ opacity: 1; display: block; }.blackenBackground{ position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; background: black; opacity: 0; display: none; z-index: 2; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box"></div> <p>Some lorem text.....</p> <button id="showBox">Show Box</button> <div class="blackenBackground"></div>

Answer 2

Did you want something like this? I added an id element to the div and changed you addclass call in your Jquery to document.getElementById('dimmer').style.display= 'none / block' in your if-else statements and changed the .css class to

.blackenBackground{
    pointer-events: none;
    background:#000;
    opacity:0.5;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
}

jsFiddle: https://jsfiddle.net/j0d8emsc/