Custom jQuery UI that doesn't have dialog and modal, needs a background overlay under the dialog box

Question

If I'm clicking on the second image with the pink background, a dialog appears. I need a background overlay under it which doesn't appear when I'm using modal: true because I have a customized library in my project. How can I add this background under the dialog box without using modal: true ?

 $(function() { $( "#dialog" ).dialog({ //modal: true, autoOpen: false, }); $(".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; }

 <!-- These scripts include the full jQuery UI --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src=""></script> <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> <div class="images"> <a href="https://www.site1.com"> <img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1"> </a> <br> <a href="https://www.site2.com"> <img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""> </a> </div> <div id="dialog" title="Lorem ipsum"> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p> </div>

Answer 1

You need to move the dialog event within the click function for dialog to be initialized at the same when you the click event occurs.

To change the background pink you can either use CSS with !important rule OR you can use addClass to the your dialogue when it opens.

Edit: Since you do not want the modal: true option for your library reasons. You can use addClass and removeClass of jQuery to add a custom modal to you body and remove the class on dialogue close.

Live Working Demo: (Both images showing dialogue with pink background modal)

 $(function() { $(".images").find("a").on('click', function(e) { e.preventDefault(); //dialog box $("#dialog").dialog({ autoOpen: false, open: function(e) { $('body').addClass('modal'); }, close: function(e) { $('body').removeClass('modal'); } }).dialog("open"); //Href setTimeout(() => { // window.location.href = $(this).prop("href"); }, 5000); }); });

 img { width: 300px; height: 250px; object-fit: cover; } .modal { background-color: pink; opacity: 1; overflow: auto; } #dialog { display: none; }

 <!-- These scripts include the full jQuery UI --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src=""></script> <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> <div class="images"> <a href="https://www.site1.com"> <img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1"> </a> <br> <a href="https://www.site2.com"> <img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""> </a> </div> <div id="dialog" title="Lorem ipsum"> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p> </div>