jquery ui对话框固定定位

我需要对话框来保持其位置,即使页面滚动,所以我使用了http://forum.jquery.com/topic/dialog-position-fixed-12-1-2010的扩展名,但有2个问题:

  • 它在IE浏览器和Firefox浏览器页面滚动闪烁(在Safari / Chrome的很好)

  • 在closures然后重新打开时,它会随着页面而松弛粘滞。

这里是我用来创build对话框的代码:

$('<div id="'+divpm_id+'"><div id="inner_'+divpm_id+'"></div><textarea class="msgTxt" id="txt'+divpm_id+'" rows="2"></textarea></div>') .dialog({ autoOpen: true, title: user_str, height: 200, stack: true, sticky: true //uses ui dialog extension to keep it fixed }); 

这里是我用来重新打开它的代码:

 jQuery('#'+divpm_id).parent().css('display','block'); 

build议/解决scheme?

谢谢

我尝试了一些在这里发布的解决scheme,但是如果在打开对话框之前页面已经滚动,则它们不起作用。 问题是它计算的位置没有考虑到滚动位置,因为在这个计算过程中位置是绝对的。

我find的解决scheme是将对话框的父级的CSS设置为固定的PRIOR以打开对话框。

 $('#my-dialog').parent().css({position:"fixed"}).end().dialog('open'); 

这假定你已经初始化了autoOpen设置为false的对话框。

请注意,如果对话框可resize,则这不起作用。 必须在禁用resize的情况下对其进行初始化,以使位置保持固定。

 $('#my-dialog').dialog({ autoOpen: false, resizable: false }); 

彻底的testing,到目前为止没有发现错误。

我将一些build议的解决scheme合并到以下代码中。 在Chrome,FF和IE9中,滚动,移动和resize对我来说都很好。

 $(dlg).dialog({ create: function(event, ui) { $(event.target).parent().css('position', 'fixed'); }, resizeStop: function(event, ui) { var position = [(Math.floor(ui.position.left) - $(window).scrollLeft()), (Math.floor(ui.position.top) - $(window).scrollTop())]; $(event.target).parent().css('position', 'fixed'); $(dlg).dialog('option','position',position); } }); 

更新:

如果您想使其成为所有对话框的默认设置:

 $.ui.dialog.prototype._oldinit = $.ui.dialog.prototype._init; $.ui.dialog.prototype._init = function() { $(this.element).parent().css('position', 'fixed'); $(this.element).dialog("option",{ resizeStop: function(event,ui) { var position = [(Math.floor(ui.position.left) - $(window).scrollLeft()), (Math.floor(ui.position.top) - $(window).scrollTop())]; $(event.target).parent().css('position', 'fixed'); // $(event.target).parent().dialog('option','position',position); // removed parent() according to hai's comment (I didn't test it) $(event.target).dialog('option','position',position); return true; } }); this._oldinit(); }; 

我无法得到斯科特的答案与jQuery UI 1.9.1工作。 我的解决scheme是重新放置在open事件callback对话框。 首先将css位置设置为固定。 然后将对话框放在你想要的位置:

 $('selector').dialog({ autoOpen: false, open: function(event, ui) { $(event.target).dialog('widget') .css({ position: 'fixed' }) .position({ my: 'center', at: 'center', of: window }); }, resizable: false }); 

注意:正如在另一个答案中指出的那样,调整对话框的大小将再次设置为绝对位置,所以我禁用了可resize

在上面的Langdons的评论中,我尝试了以下,这与jQuery-UI 1.10.0和可resize的对话框工作正常:

 $('#metadata').dialog( { create: function (event) { $(event.target).parent().css('position', 'fixed'); }, resizeStart: function (event) { $(event.target).parent().css('position', 'fixed'); }, resizeStop: function (event) { $(event.target).parent().css('position', 'fixed'); } }); 

尝试:

 $(document).ready(function() { $('#myDialog').dialog({dialogClass: "flora"}); $('.flora.ui-dialog').css({position:"fixed"}); )}; 

(来自http://dev.jqueryui.com/ticket/2848

强制您的对话框的position:fixed使用CSS

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

并将myPosition的css类定义为:

 .myPosition { position: fixed; } 
 $("#myDilog").dialog({ create:function(){ $(this).parent().css({position:"fixed"}); } }); 
  $('#myDialog').dialog({ dialogClass: "flora" }); $('.flora.ui-dialog').css({ top: "8px" }); 

无论我们点击了什么,这个对话框都会保持在最高位置。

 $('#'+tweetidstack.pop()).dialog("open").parent().css({position:"fixed"}); 

为什么使用$(document).ready? 这可能是最近的一个发展,但现在运行良好。

 $( ".ui-dialog" ).css("position","fixed"); $( ".ui-dialog" ).css("top","10px"); 

把这个代码放在对话框的打开function上

首先,创build你的对话框。 像这样的东西:

 $("#dialog_id").dialog({ autoOpen : false, modal : true, width: "auto", resizable: false, show: 'fade', hide: { effect:"drop",duration:400,direction:"up" }, position: top, height: 'auto', title: "My awesome dialog", resizeStart: function(event, ui) { positionDialog(); }, resizeStop: function(event, ui) { positionDialog(); } }); $("#dialog_id").dialog('open'); 

然后使它成为汽车中心:

  function positionDialog (){ setInterval(function(){ if($("#dialog_id").dialog( "isOpen" )){ $("#dialog_id").dialog('option','position',$("#dialog_id").dialog( "option", "position" )); } },500); } //setInterval is for make it change position "smoothly" //You can take it off and leave just the if clausule and its content inside the function positionDialog. 

解决scheme其实很简单。 我不知道这个问题是否适用于这个问题,但现在呢。

 //First a container/parent-div with fixed position is needed var dialogContainer=document.body.appendChild(document.createElement("div")); dialogContainer.style.position="fixed"; dialogContainer.style.top=dialogContainer.style.left="50%";//helps centering the window 
 //Now whenever a dialog is to be created do it something like this: $(myDialogContent).dialog({ appendTo: dialogContainer, position: { at: 'center center', of: dialogContainer } }); 

关于“appendTo”: http : //api.jqueryui.com/dialog/#option-appendTo
关于“职位”: http : //api.jqueryui.com/position/

虽然类似于上面的其他答案,但我发现我必须做的不仅仅是position: fix对话框,但我也必须position: static的内容,以保持它连接到对话框。

 $('<div id="myDialog" class="myClass">myContent</div>') .dialog(dialogOptions) .parent() .css({ position: 'fixed' }) .end() .position({ my: 'center', at: 'center', of: window }) .css({ position: 'static' }); 

在此之后,我可以随时调用.dialog('open') ,这只会出现在我离开它的地方。 我实际上有一个函数,将返回现有的对话框或根据需要创build一个新的,然后我只是改变对话框的值.dialog('open')被调用。