Positionierung jQuery Dialog

Question

Ich möchte vom rechten Rand des Browsers mein jQuery Dialog x-Pixel entfernt positionieren. Ist das irgendwie möglich?

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

Die Position Option scheint nicht diese Art von Einrichtung zu haben, aber ist es eine andere Möglichkeit, es zu tun?

Answer 1

Wenn Sie Ihr Dialogfeldes position:absolute machen, sein dann genommen über die reguläre Seite fließen, und Sie können die left und top Eigenschaft verwenden, es auf der Seite überall zu platzieren.

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

und definieren die MyPosition CSS-Klasse wie:

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

Sie können das top, left, right und bottom Eigenschaften für myPosition entweder mit einer Länge wie in Pixeln oder Prozentsatz.

Answer 2

Das hält Dialog div in fester Position

Dies funktioniert für mich in IE FF Chrom und 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');
    }

});

, wenn Sie bei geöffnetem Dialogfeld nur rufenden

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

Answer 3

Die meisten dieser Antworten schienen Abhilfen zu mir zu sein, und ich wollte den offiziellen jQuery Weg finden, es zu tun. Nach dem Lesen durch die .position() docs, fand ich, dass es in der Tat in der Initialisierung der jQuery Widget getan werden kann:

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

Wenn die 100 ist der Abstand von der rechts und von oben bzw.

Answer 4

Ich verstehe die Antwort bereits akzeptiert, aber nur für den Fall, wenn ein Bedarf weiteren Informationen: 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 5

Mit diesem Code, den Sie Ihre oberen und linke Position angeben:

$('#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

siehe hier: http://jqueryui.com/demos/dialog/#option- Position

initialisieren ein Dialog mit der Position Option angegeben.

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

Get oder die Position Option, nach der init.

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

Answer 7

Das funktioniert für mich an der rechten oberen Ecke mit 10px versetzte den Dialog anzuzeigen: position: "right-10 top+10":

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

Answer 8

Um fix Mittelposition, die ich benutze:

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