I am giving a link to open a dialog approximately in the middle of a web page. After clicking the link, a dialog opens. So far, no problem. But the weird thing is the overlay doesn't work correctly. The top of the page turns black. So it's not behind the dialog. I slide the scroll bar up when the dialog window is open. At the top the background is black. But the place where the dialog opens is the same. I'm looking for how to fix this problem. A new class definition has been proposed for a similar problem. However, that didn't work for me.
jQuery(document).ready(function($){
jQuery( "#custom-dialog" ).dialog({
autoOpen: false,
width: "50%",
height: 400,
modal: true,
responsive: true,
show: {
effect: "clip",
duration: 1000
},
hide: {
effect: "clip",
duration: 1000
},
open: function(event, ui) {
jQuery(this).closest(".ui-dialog")
.find(".ui-dialog-titlebar-close")
.removeClass("ui-dialog-titlebar-close")
.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
jQuery('.ui-widget-overlay').addClass('new-override');
}
});
jQuery( "#custom-btn" ).on( "click", function() {
jQuery( "#custom-dialog" ).dialog( "open" );
});
});.ui-widget-overlay.ui-front.new-override{background:#000;} <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<div id="custom-dialog" title="Custom">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, nobis expedita fuga repudiandae porro velit vitae? Obcaecati quia ipsa repellat tempora aspernatur quisquam, illo amet corporis nisi quis, itaque aperiam.
</div>
<button id="custom-btn">Open Dialog</button>