jqueryui diálogo posicionamiento

Question

Estoy utilizando JQuery UI y me gustaría colocar mi cuadro de diálogo centrado horizontalmente pero verticalmente por encima del centro, tal vez por 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

Utilice position option para alinear la parte superior del cuadro de diálogo con la parte superior de la ventana (más un desplazamiento de píxel o porcentaje).

Esto debería centrar el cuadro de 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 utilizan una matriz que contiene un [x, y] par de coordenadas en píxeles de desplazamiento desde la esquina izquierda, parte superior de la ventana gráfica (por ejemplo [350100]).

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

Answer 2

aplicar css en su # de diálogo en forma de uso de la muestra%

si width = 1,000

poner

izquierda: 50% margen izquierda: -500px;

para hacerlo centrado. o puedes usar iframe

Answer 3

me encontré con este durante la búsqueda de la misma pregunta bu yo ya tenía mi respuesta:

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

esto va a centrar en horizontal y 100 píxeles desde la parte superior

esto funciona también

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

centro horizontalmente y 100 píxeles desde abajo centro

Answer 4

ajusté la respuesta de Exlord para caber.

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

Ajusta horizontal y verticalmente

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

Answer 5

Esto funcionó para mí

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

También puede verificar las posiciones del diálogo aquí
Find Position

Answer 6

Prueba esto:

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

Answer 7

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

trabajado para mí.