dialogo jQuery Posizionamento

Question

Voglio posizionare i miei jQuery dialogo x-pixel di distanza dal bordo destro del browser. È questo in ogni caso possibile?

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

L'opzione posizione non sembrano avere quel tipo di messa a punto, ma c'è qualche altro modo per farlo?

Answer 1

Se si effettua position:absolute vostra finestra di dialogo, quindi la sua presa su della normale flusso della pagina, ed è possibile utilizzare la proprietà left e top per posizionarlo in qualsiasi punto della pagina.

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

e definire la classe myPosition css come:

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

È possibile impostare i top, left, right, e le proprietà bottom per myPosition utilizzando una lunghezza tale in pixel o in percentuale.

Answer 2

Ciò mantiene dialogo div in posizione fissa

questo funziona per me in IE FF Chrome e 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');
    }

});

quando si desidera finestra di dialogo aperta basta chiamare

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

Answer 3

La maggior parte di queste risposte sembrava essere soluzioni a me, e volevo trovare il modo ufficiale di jQuery per farlo. Dopo la lettura attraverso la documentazione .position(), ho scoperto che si può effettivamente essere fatto nel inizializzazione del widget di jQuery:

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

Se il +100 è la distanza dalla destra e dall'alto, rispettivamente

Answer 4

ho capito la risposta è già accettato, ma solo nel caso in cui se qualcuno ha bisogno di più informazioni: http://salman-w.blogspot.co .uk / 2013/05 / jquery-ui-dialogo-examples.html

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

Answer 5

con questo codice è possibile specificare la posizione superiore e sinistra:

$('#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+'%' );
          }
       }
 });

Answer 6

un'occhiata qui: http://jqueryui.com/demos/dialog/#option- posizione

inizializzare una finestra di dialogo con l'opzione posizione specificata.

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

ottenere o impostare l'opzione di posizione, dopo init.

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

Answer 7

Questo ha funzionato per me, per visualizzare la finestra nell'angolo in alto a destra con 10px offset: position: "right-10 top+10":

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

Answer 8

Per fissare in posizione centrale, io uso:

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