jquery ui对话框固定位置
我需要对话框在页面滚动时保持固定的位置，所以我在
http://forum.jquery.com/topic/dialog-position-fixed-12-1-2010
但它有两个问题：
它在IE和Firefox的页面滚动中闪烁(在Safari/Chrome中没问题)
在关闭然后重新打开时，它会失去粘性，并与页面一起滚动。
下面是我用来创建对话框的代码：
$('')
.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');建议/解决方案？
谢谢
回答 15
Stack Overflow用户
发布于 2011-06-28 08:20:13
我尝试了这里发布的一些解决方案，但如果在打开对话框之前滚动了页面，则它们不起作用。问题是，它在计算位置时没有考虑滚动位置，因为在此计算过程中位置是绝对的。
我找到的解决方案是在打开对话框之前将对话框的父CSS设置为fixed。
$('#my-dialog').parent().css({position:"fixed"}).end().dialog('open');这假设您已经在autoOpen设置为false的情况下初始化了对话框。
请注意，如果对话框可调整大小，则此操作不起作用。必须在禁用调整大小的情况下对其进行初始化，才能使位置保持固定。
$('#my-dialog').dialog({ autoOpen: false, resizable: false });对它进行了彻底的测试，到目前为止还没有发现任何bug。
Stack Overflow用户
发布于 2012-02-12 02:18:47
我将一些建议的解决方案组合到以下代码中。在Chrome、FF和IE9中，滚动、移动和调整大小对我来说都没问题。
$(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();
};Stack Overflow用户
发布于 2012-12-28 20:54:25
在使用jQuery UI 1.9.1时，我无法得到斯科特的回答。我的解决方案是在回调中重新定位对话框
事件。首先将css位置设置为fixed。然后将对话框放置在所需的位置：
$('selector').dialog({
autoOpen: false,
open: function(event, ui) {
$(event.target).dialog('widget')
.css({ position: 'fixed' })
.position({ my: 'center', at: 'center', of: window });
},
resizable: false
});注意:正如在另一个答案中所指出的，调整对话框的大小会将其位置设置为
绝对
再说一次，所以我禁用了
可调整大小
..。
https://stackoverflow.com/questions/2657076
复制相似问题
腾讯云开发者
