El cuadro de diálogo de jQuery UI no se encuentra en la pantalla central

Tengo un cuadro de diálogo jQuery que está destinado a posicionarse en el medio de la pantalla. Sin embargo, parece ligeramente descentrado verticalmente.

Aquí está el código:

$('#add_box').dialog({ autoOpen: true, width: 300, modal: true, resizable: false, bgiframe:true }); 

¿Alguna idea de por qué esto no se centrará?

Si su ventana gráfica se desplaza después de que aparezca el cuadro de diálogo, ya no estará centrado. Es posible que involuntariamente la ventana gráfica se desplace agregando / eliminando contenido de la página. Puede volver a centrar la ventana de diálogo durante los eventos de desplazamiento / cambio de tamaño llamando:

 $('my-selector').dialog('option', 'position', 'center'); 

¿Estás agregando jquery.ui.position.js a tu página? Tuve el mismo problema, verifiqué el código fuente aquí y me di cuenta de que no agregué ese js a mi página, después de eso … el diálogo se centró mágicamente.

Desenterrando una tumba antigua aquí, pero para los nuevos buscadores de Google.

Puede mantener la posición de la ventana del modelo cuando los usuarios se desplazan agregando este evento a su diálogo. Esto lo cambiará de absolutamente posicionado a fijo. No es necesario supervisar los eventos de desplazamiento.

 open: function(event, ui) { $(this).parent().css('position', 'fixed'); } 

Estaba teniendo el mismo problema. Terminó siendo el plugin jquery.dimensions.js . Si lo eliminé, todo funcionó bien. Lo incluí debido a otro complemento que lo requería, sin embargo, descubrí en el enlace aquí que las dimensiones se incluyeron en el núcleo de jQuery hace bastante tiempo ( http://api.jquery.com/category/dimensions ). Deberías estar bien simplemente deshaciéndote del plugin de dimensiones.

1.) El diálogo jQuery se centra en cualquier elemento en el que lo pongas.

Sin más información, supongo que tienes un cuerpo div con un margen o algo similar. Mueve el div emergente al nivel del cuerpo, y estarás listo para continuar.

2.) Si dinámicamente agrega contenido al div mientras lo carga, el centrado NO será correcto. NO visualice el div hasta que tenga los datos que pone en él.

Simplemente agrega debajo de la línea de CSS en la misma página.

 .ui-dialog { position:fixed; } 

Agregue esto a su statement de diálogo

 my: "center", at: "center", of: window 

Ejemplo:

 $("#dialog").dialog({ autoOpen: false, height: "auto", width: "auto", modal: true, my: "center", at: "center", of: window }) 

Para solucionar este problema, me aseguré de que la altura de mi cuerpo estuviera configurada al 100%.

 body { height:100% } 

Esto también mantiene la posición central mientras el usuario se desplaza.

Para mí jquery.dimensions.js fue el culpable

Este problema suele estar relacionado con la apertura del diálogo a través de una etiqueta delimitadora ( Open ) y no se impide el comportamiento predeterminado del navegador en el controlador, por ejemplo

 $('#openButton').click(function(event) { event.preventDefault(); //open dialog code... }); 

Esto generalmente elimina la necesidad de cualquier complemento de posicionamiento / desplazamiento.

Estaba enfrentando el mismo problema de tener el diálogo no abriendo centrado y desplazando mi página a la parte superior. La etiqueta que estoy usando para abrir el cuadro de diálogo es una etiqueta de anclaje:

View More

El símbolo de la libra estaba causando el problema para mí. Todo lo que hice fue modificar el href en el ancla, así:

View More

Ahora mi página está feliz y centra los diálogos.

Mi escenario: tuve que desplazarme hacia abajo en la página para abrir el cuadro de diálogo al hacer clic en un botón, debido al desplazamiento de la ventana, el cuadro de diálogo no se abría verticalmente de centro a ventana, salía del puerto de visualización.

Como Ken mencionó anteriormente, después de haber configurado su contenido modal, ejecute la statement siguiente.

 $("selector").dialog('option', 'position', 'center'); 

Si el contenido está precargado antes de que se abra el modal, solo ejecútelo en evento abierto, de lo contrario manipule DOM en evento abierto y luego ejecute la instrucción.

 $( ".selector" ).dialog({ open: function( event, ui ) { //Do DOM manipulation if needed before executing below statement $(this).dialog('option', 'position', 'center'); } }); 

Funcionó bien para mí y lo mejor es que no incluye ningún otro complemento o biblioteca para que funcione.

Acabo de resolver el mismo problema, el problema es que no importé algunos archivos js, como widget.js 🙂

Ninguna de las soluciones anteriores parecía funcionar para mí, ya que mi código está generando dinámicamente dos divs containting y dentro de eso una imagen no almacenada en caché. Mi solución fue la siguiente:

Tenga en cuenta la llamada ‘load’ en img y el parámetro ‘close’ en la llamada de diálogo.

 var div = jQuery ('
') .attr ({id: 'previewImage'}) .appendTo ('cuerpo') .esconder(); var div2 = jQuery ('
') .css ({ maxWidth: parseInt (jQuery (ventana) .width () * .80) + 'px' , maxHeight: parseInt (jQuery (ventana) .height () * .80) + 'px' , desbordamiento: 'auto' }) .appendTo (div); var img = jQuery ('') .attr ({'src': url}) .appendTo (div2) .load (function () { div.dialog ({ 'modal': verdadero , 'ancho': 'auto' , cerrar: función () { div.remove (); } }); });

Tuve que agregar esto al principio de mi archivo HTML: . No necesité establecer la propiedad de position . Esto es con jQuery 3.2.1. En 1.7.1, eso no fue necesario.

Así es como resolví el problema, agregué esta función abierta del diálogo:

  open: function () { $('.ui-dialog').css("top","0px"); } 

Esto ahora abre el cuadro de diálogo en la parte superior de la pantalla, sin importar hacia dónde se desplaza la página y en todos los navegadores.

para colocar el diálogo en el centro de la pantalla:

 $('#my-selector').parent().position({ my: "center", at: "center", of: window }); 

Tuve el mismo problema, que se solucionó cuando ingresé una altura para el diálogo:

 $("#dialog").dialog({ height: 500, width: 800 }); 

Debes agregar la statement

En la parte superior de tu documento.

Sin él, jquery tiende a poner el diálogo en la parte inferior de la página y pueden producirse errores al intentar arrastrarlo.

 $("#dialog").dialog({ autoOpen: false, height: "auto", width: "auto", modal: true, my: "center", at: "center", of: window }) 

Esta solución funciona, pero solo debido a que las nuevas versiones de jQuery ignoran esto por completo y vuelven a caer en el valor predeterminado, que es exactamente esto. De modo que solo puede quitar la posición: ‘centrar’ de sus opciones si solo quiere que el pop-up se centre.