Diálogo jQuery de posicionamiento

Question

Quiero ubicar mi cuadro de diálogo jQuery x-pixels lejos del borde derecho del navegador. ¿Es esto de todos modos posible?

http://jqueryui.com/demos/dialog/

La opción de posición no parecen tener ese tipo de configuración, pero ¿hay alguna otra manera de hacerlo?

Answer 1

Si haces de position:absolute el cuadro de diálogo, entonces es tomada sobre el flujo de la página normal, y se puede utilizar la propiedad left y top para colocarlo en cualquier lugar de la página.

$('.selector').dialog({ dialogClass: 'myPosition' }); 

y definir la clase css MyPosition como:

.myPosition { 
    position: absolute; 
    right: 200px; /* use a length or percentage */ 
} 

Puede establecer el top, left, right, y bottomproperties para myPosition utilizando ya sea una longitud tal que en píxeles o en porcentaje.

Answer 2

vistazo aquí: http://jqueryui.com/demos/dialog/#option-position

inicializar un diálogo con la opción posición especificada.

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

Obtiene o establece la opción de posición, después de iniciar.

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

Answer 3

Esta div de diálogo mantiene en posición fija

esto funciona para mí en IE FF Chrome y Safari

jQuery("#dialogDiv").dialog({ 
    autoOpen: false, 
    draggable: true, 
    resizable: false, 
    height: 'auto', 
    width: 500, 
    modal: false, 
    open: function(event, ui) { 
     $(event.target).parent().css('position', 'fixed'); 
     $(event.target).parent().css('top', '5px'); 
     $(event.target).parent().css('left', '10px'); 
    } 

}); 

al cuadro de diálogo abierto que desea a llamarlo

$('#dialogDiv').dialog('open'); 

Answer 4

Esto funcionó para para mostrar el cuadro de diálogo en la esquina superior derecha con 10px desplazamiento: position: "right-10 top+10":

$("#my-dialog").dialog({ 
    resizable: false, 
    height:"auto", 
    width:350, 
    autoOpen: false, 
    position: "right-10 top+10" 
}); 

Answer 5

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 6

entiendo la respuesta ya es aceptada, pero por si acaso si alguien necesita más información: http://salman-w.blogspot.co.uk/2013/05/jquery-ui-dialog-examples.html

$(function() { 
      $("#dialog").dialog({ 
       position: { 
        my: "right bottom", 
        at: "right bottom", 
        of: window 
       } 
      }); 
     }); 

Answer 7

La mayoría de estas respuestas parecían ser soluciones para mí, y quería encontrar la forma oficial de jQuery para hacerlo. Después de leer a través de los documentos .position(), descubrí que de hecho se puede hacer en la inicialización del widget jQuery:

$("#dialog").dialog({ 
    title:title, 
    position:{my:"right top",at:"right+100 top+100", of:"body"}, 
    width:width, 
    height:height 
}) 

caso de que el 100 es la distancia desde la derecha y desde arriba, respectivamente

Answer 8

con este código usted puede especificar su posición superior e izquierda:

$('#select_bezeh_window').dialog({ 
    modal:true, 
    resizable:false, 
     draggable:false, 
     width:40+'%', 
     height:500 , 
     position:{ 
      using: function(pos) { 
       $(this).css("top", 10+'px'); 
       $(this).css("left", 32+'%'); 
      } 
     } 
});