0

I have a problem with the z-indexes in Flexbox. I want to create:

A window (.popup) in the middle of the screen around 50% size. A white'ish overlay that lies just behind this window. When clicking on the overlay jquery hides the overlay AND the window. This is my css:

    .overlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 0.39);
        z-index: 8;
        display: block;
    }
    .popupcontainer{
        display: flex;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        align-items: center;
        justify-content:center;
        z-index: 9;
        position: absolute;
        overflow: hidden;
    }
    .popup {
        width: 50vw;
        height: 50vh;
        background-color: white;
        border: solid thin;
        padding: 1em;
        z-index: 10;
    }

However, the problem is that when I make the popupcontainer the thing that hides everything when clicking on it, it will even hide when I just click on the div of the popup window. Can anyone help me out? Cheers!

    $( document ).ready(function() {
        $('.popupcontainer').click(function(){
            $('.popup').css({'display':'none'});
            $(this).css({'display':'none'});
            $('.overlay').css({'display':'none'});
            $('#gridbox').css({'z-index':'11'});
        });
    });

The HTML:

    <div class="popupcontainer">
      <div class="popup item">
        <h1>Action</h1>
        <div id="myForm">
        </div>
      </div>
    </div>
    <div class="overlay"></div>
mesqueeb
  • 5,277
  • 5
  • 44
  • 77
  • I have two answers that may help you. See [**here**](http://stackoverflow.com/a/32515284/3597276) and [**here**](http://stackoverflow.com/a/33394666/3597276). If that doesn't work, post a comment here. I'll get your message if you start with *@michael_b*. – Michael Benjamin Nov 06 '15 at 02:26
  • You should also consider posting the jQuery code and even a demo so we could see the problem. Try jsfiddle.net. – Michael Benjamin Nov 06 '15 at 03:28
  • Thank you I added the jQuery. I still need to read the articles though! – mesqueeb Nov 06 '15 at 03:45

0 Answers0