Позиционирование диалога jQuery

Ответ 1

Если вы создадите диалоговое окно position:absolute, то его нужно принять за регулярный поток страниц, и вы можете использовать свойство left и top, чтобы поместить его в любом месте страницы.

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

и определите класс myPosition css как:

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

Вы можете установить top, left, right и bottom свойства для myPosition, используя либо длина, например, в пикселях или в процентах.

Ответ 2

Это держит диалог div в фиксированном положении

это работает для меня в IE FF хром и сафари

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');
    }

});

когда вы хотите открыть диалоговое окно, просто вызовите

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

Ответ 3

Большинство из этих ответов, казалось, были обходными способами для меня, и я хотел найти официальный способ jQuery для этого. Прочитав документы .position(), я обнаружил, что это действительно можно сделать при инициализации виджета jQuery:

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

Если +100 - это расстояние справа и сверху, соответственно

Ответ 4

смотрите здесь: http://jqueryui.com/demos/dialog/#option-position

Инициализировать диалог с указанной опцией позиции.

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

Получить или установить опцию позиции после init.

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

Ответ 5

Я понимаю, что ответ уже принят, но на всякий случай, если кому-то нужно больше информации: 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
                }
            });
        });

Ответ 6

Это помогло мне отобразить диалог в верхнем правом углу с смещением 10px: position: "right-10 top+10":

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

Ответ 7

с этим кодом u может указать верхнюю и левую позиции ur:

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

Ответ 8

Чтобы зафиксировать центральное положение, я использую:

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