cuadro de diálogo jQuery UI no posicionada centro de la pantalla

https://stackoverflow.com/questions/1467102

13-09-2019
|

Pregunta

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

Este es el código:

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

Cualquier idea por qué esto no va a centrar?

Solución

Si su ventana se desplaza después de las pantallas de diálogo, que ya no se centra. Es posible provocar involuntariamente la ventana gráfica para desplazarse mediante la adición / eliminación del contenido de la página. Puede centrar la ventana de diálogo durante el desplazamiento / cambiar el tamaño de eventos llamando a:

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

Otros consejos

¿Desea agregar a jquery.ui.position.js a su página? Yo tenía el mismo problema, comprobado el código fuente aquí y se dio cuenta que no lo hice js añadir que a mi página, después de eso .. mágicamente de diálogo centrado.

Desenterrando una vieja tumba aquí, pero para los nuevos usuarios de Google.

Puede mantener la posición de la ventana de modelo cuando los usuarios se desplaza por la adición de este evento al diálogo. Esto va a cambiar de posición absoluta a fijo. No hay necesidad de monitorear el desplazamiento eventos.

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

Yo estaba teniendo el mismo problema. Se terminó siendo el jquery.dimensions.js plugin. Si se lo quité, todo funcionaba bien. Lo incluí porque de otro plugin que lo requería, sin embargo, me di cuenta desde el enlace aquí que las dimensiones se incluyó en el núcleo de jQuery hace bastante tiempo ( http://api.jquery.com/category/dimensions ). Usted debe estar bien simplemente deshacerse de las dimensiones plugin.

1.) Los centros de diálogo jQuery en cualquier elemento que lo puso en.

Sin más información, mi conjetura es que usted tiene un div cuerpo con un margen o algo por el estilo. Mover el div emergente a nivel del cuerpo, y usted estará listo para salir.

2.) Si se agrega dinámicamente el contenido de la div que se carga, centrado no será correcta. Sin mostrar el div hasta que tenga la Your'e datos, situando en ella.

Basta con añadir debajo de la línea de CSS en la misma página.

.ui-dialog 
{
position:fixed;
}

Para solucionar este problema me aseguré de que mi altura del cuerpo se ajusta al 100%.

body { height:100% }

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

Agregue esto a su declaración 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 mí jquery.dimensions.js era el culpable

Este problema suele estar relacionado con la apertura del diálogo a través de una etiqueta de anclaje (<a href='#' id='openButton'>Open</a>) y no impedir el comportamiento navegador por defecto en el controlador por ejemplo.

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

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

Yo estaba frente a la misma cuestión de tener el cuadro de diálogo no se abre centrado y desplazamiento mi página a la parte superior. La etiqueta que estoy usando para abrir el diálogo es una etiqueta de ancla:

<a href="#">View More</a>

El símbolo de la libra estaba causando el problema para mí. Todo lo que hice fue modificar el href en el anclaje de este modo:

<a href="javascript:{}">View More</a>

Ahora mi página es feliz y centrado de los cuadros de diálogo.

Mi Escenario: que tenía que desplazarse hacia abajo en la página para abrir el diálogo en un clic de botón, debido a la ventana de desplazamiento del cuadro de diálogo no se abre verticalmente centrar a la ventana, se iba a salir del puerto de vista .

Ken ha mencionado anteriormente, después de haber establecido su contenido modal ejecutar declaración abajo.

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

Si el contenido es pre-cargado antes de modal se abre sólo hay que ejecutar esto en evento abierto, otra cosa manipular DOM en el evento abierto y luego se ejecutará la sentencia.

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

Se trabajó bien para mí y lo mejor es que no se incluye ningún otro plugin o biblioteca para que funcione.

acabamos de resolver el mismo problema, el problema era que yo no importó algunos archivos js, como widget.js:)

Ninguna de las soluciones anteriores parecía funcionar para mí desde mi código está generando dinámicamente dos divs containting y dentro de ella una imagen-un caché. Mi solución fue la siguiente:

Por favor, tenga en cuenta la 'carga' de llamar img, y el parámetro 'cerca' de la llamada de diálogo.

var div = jQuery('<div></div>')
                  .attr({id: 'previewImage'})
                  .appendTo('body')
                  .hide();
var div2 = jQuery('<div></div>')
                  .css({
                      maxWidth: parseInt(jQuery(window).width() *.80) + 'px'
                      , maxHeight: parseInt(jQuery(window).height() *.80) + 'px'
                      , overflow: 'auto'
                  })
                  .appendTo(div);
var img = jQuery('<img>')
                  .attr({'src': url})
                  .appendTo(div2)
                  .load(function() {
                      div.dialog({
                          'modal': true
                          , 'width': 'auto'
                          , close: function() {
                               div.remove();
                          }
                      });
                  });

he tenido que añadir esto a la parte superior de mi archivo HTML: <!doctype html>. No necesitaba para establecer la propiedad position. Esto es con jQuery 3.2.1. En 1.7.1, que no era necesario.

Así es como he resuelto el problema, he añadido esta función abierta del diálogo:

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

Esto ahora se abre el cuadro de diálogo en la parte superior de la pantalla, no importa donde la página se desplaza hacia y en todos los navegadores.

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

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

Yo tenía el mismo problema, que se fijó cuando entré a una altura para el diálogo:

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

Debe añadir la declaración

En la parte superior de su documento.

Sin ella, jQuery tiende a poner el diálogo en la parte inferior de la página y pueden producirse errores al tratar de arrastrar a él.

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

Esta solución funciona, pero sólo a causa de las nuevas versiones de jQuery haciendo caso omiso de esto completamente y la caída en el valor predeterminado, que es exactamente esto. Por lo que sólo puede quitar posición:. 'Centro' de sus opciones si lo que desea es el pop-up que se centra

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow