Позиционирование диалога jQuery
Я хочу расположить диалоги jQuery в x-пикселях от правой границы браузера. Это возможно?
http://jqueryui.com/demos/dialog/
У опции позиции нет такой настройки, но есть ли другой способ сделать это?
Ответы
Ответ 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)
});
}