removeattr - remove style jquery

jQuery diálogo siempre centrado

Question

¿Cómo puedo implementar que un diálogo modal de jQuery con ancho y alto automático siempre esté centrado en el navegador? También después de cambiar el tamaño de la ventana del navegador.

El siguiente código no funciona. Creo que el problema es el ancho y la altura automáticos.

jQuery - código

$("<div class=''popupDialog''>Loading...</div>").dialog({
  autoOpen: true,
  closeOnEscape: true,
  height: ''auto'',
  modal: true,
  title: ''About Ricky'',
  width: ''auto''
}).bind(''dialogclose'', function() {
  jdialog.dialog(''destroy'');
}).load(url, function() {
  $(this).dialog("option", "position", [''center'', ''center''] );
});

$(window).resize(function() {
  $(".ui-dialog-content").dialog("option", "position", [''center'', ''center'']);
});

¡Gracias!

Answer 1

La ventana modal alrededor del cuadro de diálogo debería permitirle colocar el cuadro de diálogo centrado con el css de:

margin-left:auto;margin-right:auto;

¿Esto no funciona? ¿Tienes una página de "muestra" que podamos ver?

Answer 2

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

Trabajo jsFiddle: http://jsfiddle.net/vNB8M/

El cuadro de diálogo se centra con el ancho y la altura automáticos y continúa centrado después del cambio de tamaño de la ventana.

Answer 3

Acutalmente, creo que la position: ["center", "center"] no es la mejor solución, ya que asigna una top: explicita top: e left: propiedades de css para el diálogo se basan en el tamaño de la ventana gráfica en la creación.

Me encontré con este mismo problema al tratar de tener un centro de diálogo en la pantalla verticalmente. Aquí está mi solución:

En la parte de options de mi función .dialog() , paso la position:[null, 32] . El null establece a la left: valora el estilo del elemento, y el 32 solo sirve para mantener el cuadro de diálogo vinculado a la parte superior de la ventana. También asegúrese de establecer un ancho explícito.

También uso la opción dialogClass para asignar una clase personalizada, que es simplemente un margin:0 auto; propiedad css:

.myClass{
    margin:0 auto;
}

Y mi diálogo se ve así:

  $(''div#popup'').dialog({
    autoOpen: false,
    height: 710,
    modal: true,
    position: [null, 32],
    dialogClass: "myClass",
    resizable: false,
    show: ''fade'',
    width: 1080
  });

Espero que esto ayude a alguien.

Answer 4

Ninguna de las respuestas hizo exactamente lo que yo quería. Para aquellos que todavía tienen problemas con esto, esto es lo que funcionó para mí. Esto forzará que el diálogo aparezca siempre en el centro de la pantalla, y centrará el diálogo a medida que el navegador cambie de tamaño.

$( "#ShowDialogButton" ).click(function(){
    $( "#MyDialog" ).dialog({
       show: ''fade''
     }).dialog( "option", "position", { my: "center", at: "center", of: window } );

    $(window).resize(function() {
        $( "#MyDialog" ).dialog( "option", "position", { my: "center", at: "center", of: window } );
    });

});

Answer 5

Esta solución está funcionando:

$(window).resize(function () 
{
    $("#myDialog").dialog("close");
    $("#myDialog").dialog("open");
});

El rendimiento es bastante malo, pero puedes esperar para cambiar el tamaño del final: jQuery: ¿cómo esperar el evento ''final'' del ''cambio de tamaño'' y solo entonces realizar una acción? .

También probé esto, pero no puedo desplazarme más abajo o más arriba que la posición del elemento que abrió el diálogo:

$(window).scroll(function () 
{
    $("#myDialog").dialog("close");
    $("#myDialog").dialog("open");
});