¿Hay alguna posibilidad de arreglar la ventana modal para jQuery UI, por lo que cuando el usuario está utilizando la rueda de desplazamiento en el lado derecho, el lado detrás se desplaza, pero la ventana modal se queda fija ?jQuery UI El cuadro de diálogo modal se debe fijar en desplazamiento
Crear una clase CSS con la posición fija:
.fixed-dialog{
position: fixed;
top: 50px;
left: 50px;
}
continuación, anexar la clase como parte de las opciones al crear el cuadro de diálogo:
$(".selector").dialog({ dialogClass: 'fixed-dialog' });
Aquí es un ejemplo de trabajo: http://jsfiddle.net/3hrSv/ El ejemplo no es demasiado llamativo porque no pude obtener jsfiddle para darle estilo al diálogo.
Si desea centrar el diálogo en el centro de la pantalla intente establecer top:50%; left:50%; en su css como se sugiere por: http://css-tricks.com/320-quick-css-trick-how-to-center-an-object-exactly-in-the-center/
Si desea que todos los cuadros de diálogo para tener este comportamiento, puede modificar jquery.ui.dialog.css archivo.
Cambio:
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
Para:
.ui-dialog { position: fixed; padding: .2em; width: 300px; overflow: hidden; }
o, si desea conservar el archivo original, sólo tiene que añadir la línea:
div.ui-dialog {position:fixed;}
a uno de su css archivos a los que hace referencia la página, o el bloque de estilos en la página.
Esta es una pregunta antigua, pero encontré que la respuesta de James (para revisar el diálogo div.ui de JQuery a la posición: fijo) proporcionaba la mitad de la respuesta a esta pregunta. La otra mitad es esta: asegúrese de que la altura del elemento principal sea 100%. En mi caso, el cuerpo es el padre de mis diálogos, así que tengo esta línea:
<body style='height: 100%; min-height: 100%;'>
Eso, más la sugerencia de James para agregar esto a mi archivo CSS:
div.ui-dialog {position:fixed;}
... finalmente conseguí que mis diálogos aparecieran en el centro de la ventana del navegador y permanecieran allí mientras me desplazo. Espero que esto ayude a los futuros usuarios de Google que puedan pasar por aquí.
O aplicar el CSS cuando se crea:
$("#Modal").dialog({
autoOpen: false,
width: 500,
height: 'auto',
position: [50, 150],
create: function (event) {
$(event.target).parent().css({ 'position': 'fixed', "left": 50, "top": 150 });
}
});
Estilo añadió que violín: http://jsfiddle.net/3hrSv/2/ –
Ok, pero no se centró el layoer. Permanecerá 50px arriba y 50px a la izquierda, pero este no es el centro. Cómo centrarlo? –
Niko Nik Actualicé mi respuesta para manejar el centrado, no me di cuenta de que quería mantenerlo centrado. –