¿Cómo puedo colocar mi diálogo jQuery para centrar?

Question

He intentado siguiente código, pero sólo se posiciona diálogos dejaron posición esquina superior al jardín central, y eso hace que el elemento a ser alineado a la derecha. ¿Cómo se puede centrar I de diálogo a un centro real que cuenta anchura de los elementos, de manera que la línea central recortará de diálogo al 50% a 50% mitades?

$('.selector').dialog({ position: 'center' });

http://docs.jquery.com/UI/Dialog#option-position

Answer 1

Estoy bastante seguro de que no es necesario para establecer una posición:

$("#dialog").dialog();

debería centrarse de forma predeterminada .

Yo tenía un vistazo al artículo, y también la inspección de lo que dice en la jQuery oficial sitio -ui sobre el posicionamiento de un de diálogo: y en ella se discutieron 2 estados de:. inicializar y después de iniciación del

Ejemplos de código - (tomado de jQuery UI 2009-12-03)

Inicializar un cuadro de diálogo con la opción posición especificada.

$('.selector').dialog({ position: 'top' });

Obtener o establecer la opción de posición, después de init.

//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');

Creo que si tuviera que quitar el atributo posición se encontraría que se centra por sí mismo otra cosa intentar la segunda opción colocador donde se definen 3 elementos de la "opción" "posición" y "centro".

Answer 2

La última jQuery UI tiene un componente posición:

$("#myDialog").position({
   my: "center",
   at: "center",
   of: window
});

Doc: http://jqueryui.com/demos/position/
Get: http://jqueryui.com/download

Answer 3

Debido a que el diálogo necesita una posición, es necesario incluir la posición js

<script src="jquery.ui.position.js"></script>

Answer 4

Así que si alguien golpea esta página como lo hice, o para cuando se me olvida en 15 minutos, estoy usando jqueryui versión 1.10.1 de diálogo y jQuery 1.9.1 con IE8 en un iframe (bla), y se necesita una dentro especifica o no funciona, es decir,

position: {
 my: "center bottom",
 at: "center top",
 of: $("#submitbutton"),
 within: $(".content")
}

Gracias a @ vm370 para mí apuntando en la dirección correcta.

Answer 5

open: function () {

    var win = $(window);

    $(this).parent().css({
        position: 'absolute',
        left: (win.width() - $(this).parent().outerWidth()) / 2,
        top: (win.height() - $(this).parent().outerHeight()) / 2
    });
}

Answer 6

Para fijar la posición central, que utilizo:

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}

Answer 7

Probar ....

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

Answer 8

Me estoy mejores resultados para poner de diálogo jQuery en el centro de la ventana del navegador con:

position: { my: "center bottom", at: "center center", of: window },

Hay manera probablemente más precisa para posicionarlo con la opción " mediante " tal como se describe en la documentación de la dirección http://api.jqueryui.com/position/ pero estoy en un apuro ...

Answer 9

Tengo que llamar dialog() función dos veces para colocar el cuadro de diálogo (jQuery v1.11.2 / jQueryUI v1.10.4).

$("#myDialog").dialog({
    /* initial dialog parameters */
}).dialog({
    position: {
        my: "center center",
        at: "center center",
        of: window
    }
});

Answer 10

Después de parámetro de posición que funcionó para mí

position: { my: "right bottom", at: "center center", of: window },

Buena suerte!

Answer 11

Jquery UI 1.9.2, jquery y las versiones posteriores de soporte don' IE8

He encontrado dos soluciones para eso.

1. Rollback a jquery UI 1.7.2 para apoyar IE8,

2. Trate de este código con Jquery UI 1.9.2

position: {my: "center",  at: "center", of: $("body"),within: $("body") }

Answer 12

De acuerdo con la siguiente discusión, el problema podría ser debido a una menor compatibilidad de IE en las nuevas versiones de jQuery, volviendo de nuevo a 1.7.2 parece resolver el problema, que sólo se produce en IE8. http://forum.jquery.com / tema / jquery-ui-diálogo-posicionamiento-no-trabajo-en-iE-8

Answer 13

Otra cosa que le puede dar diablo con jQuery diálogo posicionamiento, especialmente para documentos más grandes que el puerto de vista del navegador - debe agregar la declaración

<!DOCTYPE html>

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.

Answer 14

Si está utilizando archivos individuales o un jquery jquery descarga personalizada de cualquier manera asegúrese de que también tiene jquery.ui.position.js añaden a la página.

Answer 15

¿Está ejecutando en este sólo en IE? Si es así, trate de añadir esto a la primera línea de la etiqueta HEAD de su página:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Yo tenía sin embargo que todos los problemas de compatibilidad se fijaron en jQueries posteriores, pero me encontré con la de hoy.

Answer 16

Probar para las versiones anteriores y alguien que no quieren utilizar la posición:

$("#dialog-div-id").dialog({position: ['center', 'top'],....

Answer 17

También es necesario hacer manual de re-centrado si se utiliza la interfaz de usuario jQuery en dispositivos móviles - el cuadro de diálogo se coloca manualmente a través de una propiedad CSS 'izquierda y arriba'. si el usuario cambia de orientación, el posicionamiento ya no está centrada, y se debe adaptar / re-centrado después.

Answer 18

Para entorno de Win7 / IE9 apenas se fija en su archivo CSS:

.ui-dialog {
   top: 100px;
   left: 350px !important;
}

Answer 19

He tenido un problema con esto y finalmente me di cuenta de esto. Hasta hoy yo estaba usando una versión muy antigua de jQuery, versión 1.8.2.

En todas partes donde había utilizado dialog había inicializado con la opción siguiente posición:

$.dialog({
    position: "center"
});

Sin embargo, he encontrado que la eliminación de position: "center" o de sustituirla por la sintaxis correcta no hizo el truco, por ejemplo:

$.dialog({
    position: {
       my: "center",
       at: "center",
       of: window
    }
});

Aunque la anterior es correcta, también estaba usando option para establecer la posición como centro cuando he cargado la página, a la manera antigua, así:

// The wrong old way of keeping a dialog centered
passwordDialogInstance.dialog("option", "position", "center");

Esto causaba todos mis ventanas de diálogo que se adhieren a la parte superior izquierda de la ventana de observación.

he tenido que reemplazar todas las instancias de esta con la nueva sintaxis correcta a continuación:

passwordDialogInstance.dialog(
    "option",
    "position", 
    { my: "center", at: "center", of: window }
);

Answer 20

Me fijo con CSS:

.ui-dialog .ui-dialog-content {
  width: 975px!important;
  height: 685px!important;
  position: fixed;
  top: 5%;
  left: 50%;
  margin:0 0 0 -488px;
}

Answer 21

No se pudo obtener IE9 para centrar el diálogo.

Fijo añadiendo esto a la CSS:

.ui-dialog {
    left:1%;
    right:1%;
}

Porcentaje no importa. Cualquier número pequeño trabajó.