example - jqueryui com menu
Diálogo jQuery UI: la ventana exterior se desplaza mientras se desplaza dentro del diálogo (3)
Estoy usando un diálogo de jQuery UI para mostrar una ventana emergente que contiene una página. Cuando me desplazo dentro de la ventana emergente y si las barras de desplazamiento llegan a la parte inferior, la página principal comienza a desplazarse. ¿Cómo puedo restringir el desplazamiento de la página principal mientras me desplazo dentro del cuadro de diálogo?
He creado un diálogo modal usando el siguiente código.
// Dialog
$(''#dialog'').dialog({
autoOpen: false,
width: 800,
height: 550,
minHeight: 500,
maxHeight: 800,
minWidth: 500,
maxWidth: 900,
modal: true,
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
});
$(''#AddNewItems'').click(function () {
var currentURL = getURLOfCurrentPage();
$(''#dialog'').dialog(''open'');
$("#dialog").dialog("option", "width", 800);
$("#dialog").dialog("option", "height", 550);
$("#dialog").dialog( "option", "draggable", false );
$("#dialog").dialog( "option", "modal", true );
$("#dialog").dialog( "option", "resizable", false );
$(''#dialog'').dialog("option", "title", ''My Title'');
$("#modalIframeId").attr("src", "http://myUrl");
return false;
});
Algo como esto podría funcionar (esto no está probado):
<script type="text/javascript" language="Javascript">
var stop_scroll = false;
function scrolltop(){
if(stop_scroll == true){
scroll(0,0);
// Or window.scrollTo(0,0);
}
}
</script>
En tu etiqueta de cuerpo ( <body></body> )
<body onscroll="scrolltop();" >
Por último, establezca stop_scroll en verdadero cuando abra el diálogo y falso cuando lo cierre.
Esto es lo que uso:
$(''#dialog'').dialog({
autoOpen: false,
width: 800,
height: 550,
minHeight: 500,
maxHeight: 800,
minWidth: 500,
maxWidth: 900,
modal: true,
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
},
open: function(){
$("body").css("overflow", "hidden");
},
close: function(){
$("body").css("overflow", "auto");
}
});
La solución de gurun8 funcionó mejor para mí. Sin embargo, necesitaba una manera de hacer esto globalmente. Mi aplicación utiliza diálogos en varias páginas y no quería actualizar todas las instancias.
El siguiente código manejará la apertura y el cierre de todos los diálogos:
$(''body'').on(''dialogopen'', ''.ui-dialog-content'', function () {
var $dialog = $(this);
var $body = $(''body'');
var height = $body.height();
// Hide the main scrollbar while the dialog is visible. This will prevent the main window
// from scrolling if the user reaches the end of the dialog''s scrollbar.
$body.css(''overflow'', ''hidden'');
// Calling resize on the dialog so that the overlay is resized for the scrollbars that are now hidden.
$dialog.resize().on(''dialogclose'', function () {
// Show the main scrollbars and unbind the close event handler, as if the
// dialog is shown again, we don''t want the handler to fire multiple times.
$body.css(''overflow'', ''auto'');
$dialog.off(''dialogclose'');
});
});
Estoy usando jQuery v1.8.23. Probé esto en Internet Explorer 8, Internet Explorer 9, Firefox 17 y Chrome 19.