example - jquery modal form
¿Cómo puedo ubicar mi cuadro de diálogo de jQuery en el centro? (21)
He intentado seguir el código, pero solo coloca los cuadros de diálogo a la izquierda en la posición de esquina superior al centro, y eso hace que el elemento se alinee a la derecha. ¿Cómo puedo centrar el cuadro de diálogo en el centro real que cuenta el ancho de los elementos, para que la línea central corte el diálogo al 50%?
$(''.selector'').dialog({ position: ''center'' });
¿Te encuentras con esto solo en IE? Si es así, intente agregar esto a la PRIMERA línea de la etiqueta HEAD de su página:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Aunque pensé que todos los problemas de compatibilidad se solucionaron en jQueries posteriores, pero me topé con este hoy.
Como el diálogo necesita una posición, debe incluir la posición js
<script src="jquery.ui.position.js"></script>
De acuerdo con la siguiente discusión, el problema podría deberse a la menor compatibilidad de IE en las versiones jQuery más nuevas, volver a 1.7.2 parece resolver el problema, que solo ocurre en IE8. http://forum.jquery.com/topic/jquery-ui-dialog-positioning-not-working-in-ie-8
El siguiente parámetro de posición funcionó para mí
position: { my: "right bottom", at: "center center", of: window },
¡Buena suerte!
Entonces, si alguien llega a esta página como lo hice, o cuando lo olvido en 15 minutos, estoy usando el cuadro de diálogo jqueryui versión 1.10.1 y jquery 1.9.1 con ie8 en un iframe (blah), y necesita una especificada dentro o no funciona, es decir,
position: {
my: "center bottom",
at: "center top",
of: $("#submitbutton"),
within: $(".content")
}
Gracias a @ vm370 por apuntarme en la dirección correcta.
Estoy bastante seguro de que no deberías necesitar establecer una posición:
$("#dialog").dialog();
Eché un vistazo al artículo y también verifiqué lo que dice en el sitio oficial de jquery-ui sobre el posicionamiento de un diálogo : y en él se discutieron 2 estados de: inicialización y después de la inicialización.
Ejemplos de código: (tomado de jQuery UI 2009-12-03)
Inicialice un diálogo con la opción de posición especificada.
$(''.selector'').dialog({ position: ''top'' });
Obtén o establece 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 eliminara el atributo de posición, encontraría que se centra solo, en caso contrario, pruebe la opción del segundo setter, donde define 3 elementos de "opción", "posición" y "centro".
La última interfaz de usuario jQuery tiene un componente de posición:
$("#myDialog").position({
my: "center",
at: "center",
of: window
});
Doc: http://jqueryui.com/demos/position/
Obtenga: http://jqueryui.com/download
Lo arreglé con css:
.ui-dialog .ui-dialog-content {
width: 975px!important;
height: 685px!important;
position: fixed;
top: 5%;
left: 50%;
margin:0 0 0 -488px;
}
No se pudo hacer que IE9 centre el diálogo.
Se corrigió agregando esto a la CSS:
.ui-dialog {
left:1%;
right:1%;
}
El por ciento no importa. Cualquier número pequeño funcionó.
Obtengo mejores resultados al colocar el cuadro de diálogo jQuery en el centro de la ventana del navegador con:
position: { my: "center bottom", at: "center center", of: window },
Probablemente exista una manera más precisa de posicionarlo con la opción " usar " como se describe en la documentación en http://api.jqueryui.com/position/ pero tengo prisa ...
Otra cosa que puede infligir un gran daño con el posicionamiento de JQuery Dialog, especialmente para documentos de mayor tamaño que el puerto de visualización del navegador, debe agregar la declaración
<!DOCTYPE html>
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.
Para el entorno de Win7 / IE9, simplemente configura en tu archivo css:
.ui-dialog {
top: 100px;
left: 350px !important;
}
Para fijar la posición central, 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)
});
}
Prueba esto....
$(window).resize(function() {
$("#dialog").dialog("option", "position", "center");
});
Pruebe esto para versiones anteriores y para alguien que no quiera usar la posición:
$("#dialog-div-id").dialog({position: [''center'', ''top''],....
Si está utilizando archivos jquery individuales o una descarga de jquery personalizada de cualquier manera, asegúrese de que también tenga jquery.ui.position.js agregado a su página.
También debe realizar el recentrado manual si usa jquery ui en dispositivos móviles: el cuadro de diálogo se coloca manualmente a través de una propiedad css ''izquierda y superior''. si el usuario cambia de orientación, el posicionamiento ya no está centrado, y debe ser adaptado / recentrado después.
Tengo que llamar al dialog() funciones dialog() 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
}
});
Tuve un problema con esto y finalmente me di cuenta de esto. Hasta hoy estaba usando una versión realmente antigua de jQuery, versión 1.8.2.
En todas partes donde utilicé el dialog lo inicialicé con la siguiente opción de posición:
$.dialog({
position: "center"
});
Sin embargo, descubrí que eliminar la position: "center" o reemplazarla con la sintaxis correcta no funcionaba, por ejemplo:
$.dialog({
position: {
my: "center",
at: "center",
of: window
}
});
Aunque lo anterior es correcto, también estaba usando la option para establecer la posición como centro cuando cargué la página, de la manera antigua, así:
// The wrong old way of keeping a dialog centered
passwordDialogInstance.dialog("option", "position", "center");
Esto causaba que todas mis ventanas de diálogo se pegaran a la parte superior izquierda del puerto de vista.
Tuve que reemplazar todas las instancias de esto con la nueva sintaxis correcta a continuación:
passwordDialogInstance.dialog(
"option",
"position",
{ my: "center", at: "center", of: window }
);
Jquery UI 1.9.2 , jquery y las versiones posteriores no son compatibles con IE8
Encontré dos soluciones para eso.
Revertir a
jquery UI 1.7.2para admitir IE8,Pruebe este código con
Jquery UI 1.9.2
position: {my: "center", at: "center", of: $("body"),within: $("body") }
open: function () {
var win = $(window);
$(this).parent().css({
position: ''absolute'',
left: (win.width() - $(this).parent().outerWidth()) / 2,
top: (win.height() - $(this).parent().outerHeight()) / 2
});
}