A background overlay under jQuery UI dialog doesn't cover the images as expected

Question

I'm having a small issue regarding the dark background that is appearing when clicking on the second image with pink background. How can I make it cover the images but not the dialog box?

Because of the customized libary of jQuery UI, I can't use modal: true

How can I make it cover the images but not the dialog box?

$(function() {
  $("#dialog").dialog({
    //modal: true,
    autoOpen: false,
    open: function(e) {
      $('body').addClass('modal');
    },
    close: function(e) {
      $('body').removeClass('modal');
    }
  });

  $(".images").find("a").eq(1).on('click', function(e) {
    e.preventDefault();
    /*setTimeout(() => {
      window.location.href = $(this).prop("href");
    }, 5000);*/
    $("#dialog").dialog("open");
  });
});

#dialog {
  display: none;
}

img {
  width: 300px;
  height: 250px;
  object-fit: cover;
}

.modal {
  background-color: black;
  opacity: 1;
  overflow: auto;
  z-index: 1;
}








  
    
  
  
    
  


  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.

user_5278356 · Answer

The web browser prints the HTML content on the page using a tree structure. So, the body tag is the deeper tag in your page. Because of that, the background black on body can't cover the other elements inside of it.

Just create a div tag between .images and #dialog, called #modal-background for example. Then, when you open or close the modal, shown and hide #modal-background.

The style of can be like that:

#modal-background.modal {
    width: 100%;
    height: 100%;
    opacity: 1;
    overflow: auto;
    z-index: 1;
    background-color: black;
}
```

user_6076863 · Answer

Use the CSS ::after pseudo-element.

Please remove background-color: black; CSS from .modal. Just add below CSS.

.modal:after {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

The styles and considerations in this technique are pretty much easy, we’ll be styling the :after pseudo-element on the body. You can choose to position the pseudo-element absolutely with respect to the body, or give it a fixed position.

Updated Snippet :-

$(function() {
  $("#dialog").dialog({
    //modal: true,
    autoOpen: false,
    open: function(e) {
      $('body').addClass('modal');
    },
    close: function(e) {
      $('body').removeClass('modal');
    }
  });

  $(".images").find("a").eq(1).on('click', function(e) {
    e.preventDefault();
    /*setTimeout(() => {
      window.location.href = $(this).prop("href");
    }, 5000);*/
    $("#dialog").dialog("open");
  });
});

#dialog {
  display: none;
}

img {
  width: 300px;
  height: 250px;
  object-fit: cover;
}

.modal {
  opacity: 1;
  overflow: auto;
  z-index: 1;
}

.modal:after {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}








  
    
  
  
    
  


  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.

user_13669048 · Answer

If you really to want black out out all the div behind your jQuery dialog box then need to wrap your images in a div and do CSS on that instead of using body here then.

Also, we do not need opacity anymore since all the color will be darker. You can either use CSS::after or CSS::before to do that.

For better practice: (in your case) I have wrapped the images div in this div in new div .modal-body to achieve those results.

Live Working Demo:

$(function() {
  $(".images").find("a").eq(1).on('click', function(e) {
    e.preventDefault();

    $("#dialog").dialog({
      autoOpen: false,
      open: function(e) {
        $('body').addClass('modal');
      },
      close: function(e) {
        $('body').removeClass('modal');
      }
    }).dialog("open");
    setTimeout(() => {
      //window.location.href = $(this).prop("href");
    }, 50000);
  });
});

#dialog {
  display: none;
}

img {
  width: 300px;
  height: 250px;
  object-fit: cover;
}

.modal {
  background-color: pink;
}

.modal:after {
  content: '';
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: pink;
}








  
    
      
    
    

    
      
    
  
  
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.

A background overlay under jQuery UI dialog doesn't cover the images as expected

3 Answers