Estoy dando un enlace para abrir un cuadro de diálogo aproximadamente en el medio de una página web. Después de hacer clic en el enlace, se abre un cuadro de diálogo. Hasta ahora, ningún problema. Pero lo extraño es que la superposición no funciona correctamente. La parte superior de la página se vuelve negra. Así que no está detrás del diálogo. Deslizo la barra de desplazamiento hacia arriba cuando la ventana de diálogo está abierta. En la parte superior el fondo es negro. Pero el lugar donde se abre el cuadro de diálogo es el mismo. Estoy buscando como solucionar este problema. Se ha propuesto una nueva definición de clase para un problema similar. Sin embargo, eso no funcionó para mí.
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>