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"}); )};
强制您的对话框的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')被调用。
