ejemplos - modal popup jquery example

posicionamiento del diálogo jqueryui

Question

Estoy usando la interfaz de usuario de JQuery y me gustaría ubicar mi cuadro de diálogo centrado horizontalmente pero verticalmente por encima del centro, tal vez en una cantidad fija de píxeles o una distancia relativa desde la parte superior de la página. ¿Hay una forma fácil de hacer esto? Parece que hay solo un par de valores predefinidos o puedo usar una posición exacta pero ¿hay alguna manera fácil de lograr esto?

 $("#dialog-form").dialog({
                autoOpen: false,
                width: 630,
                position: ''center'',
                modal: true,
                resizable: false,
                closeOnEscape: false

            });

Answer 1

Ajusté la respuesta de Exlord para que encajara.

posición: [''centro-7%'', ''centro-12%'']

Esto se ajusta horizontal y verticalmente

$(".popup").dialog({    
position: [''center-7%'', ''center-12%''],
title: ''Updating'',
    width: "auto",
}
});

Answer 2

Esto funcionó para mí

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

También puedes verificar las posiciones del diálogo aquí
Encontrar posición

Answer 3

Me encontré con esto mientras buscaba la misma pregunta, pero ya tenía mi respuesta:

position: [''center'', ''top+100'']

esto se centrará horizontalmente y 100 píxeles desde la parte superior

esto también funciona

position: [''center'', ''center+100'']

centro horizontalmente y 100 píxeles desde abajo centro

Answer 4

Prueba esto:

    position: {
        my: ''top'',
        at: ''top'',
        of: $(''#some-div'')
    },

Answer 5

Si alguien está creando un enlace que abre un cuadro de diálogo jQuery debido a que la clase del enlace tiene un controlador de evento click, puede observar que puede saltar a la parte superior de la página pero crear el cuadro de diálogo modal más abajo en la página y debe desplazarse a eso.

Si alguien está tratando de evitar que el cuadro de diálogo de jQuery salte a la parte superior, y quiere que permanezca cerca del enlace en el que hizo clic, simplemente elimine href . Casi se volvió loco tratando de resolver esto. La especificación HTML5 aparentemente entiende href="" o href="#" para significar moverse a la cima.

Answer 6

Utilice la opción de posición para alinear la parte superior del diálogo con la parte superior de la ventana (más un desplazamiento de píxel o porcentaje).

Esto debería centrar el diálogo horizontalmente y colocarlo a 150 píxeles desde la parte superior.

$("#dialog-form").dialog({
    autoOpen: false,
    width: 630,
    position: { my: ''top'', at: ''top+150'' },
    modal: true,
    resizable: false,
    closeOnEscape: false
});

Las versiones anteriores de jQuery UI utilizaban una matriz que contenía un par de coordenadas [x, y] en el desplazamiento del píxel desde la esquina superior izquierda de la ventana gráfica (por ejemplo, [350,100]).

var dialogWidth = 630;
$("#dialog-form").dialog({
    // ...
    width: dialogWidth,
    position: [($(window).width() / 2) - (dialogWidth / 2), 150],
    // ...
});

Answer 7

aplica CSS a tu # forma de diálogo uso% muestra

si ancho = 1000

poner

left: 50% margin-left: -500px;

para hacerlo centrado o puedes usar iframe

Answer 8

position: { 
   my: ''top'', 
   at: ''top+150'' 
}

Trabajó para mi.