CSS jquery ui对话框固定定位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2657076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery ui dialog fixed positioning
提问by Sofia
I needed the dialog to maintain its position fixed even if the page scrolled, so i used the extension at http://forum.jquery.com/topic/dialog-position-fixed-12-1-2010but there's 2 problems with it:
即使页面滚动，我也需要对话框保持其位置固定，所以我使用了http://forum.jquery.com/topic/dialog-position-fixed-12-1-2010 上的扩展，但它有 2 个问题：
it flickers in IE and Firefox on page scroll (in Safari/Chrome it's fine)
on closing and then reopening, it looses its stickyness and scrolls along with the page.
它在页面滚动时在 IE 和 Firefox 中闪烁（在 Safari/Chrome 中很好）
在关闭然后重新打开时，它会失去粘性并随页面滚动。
Here's the code i'm using for creating the dialog:
这是我用于创建对话框的代码：
$('<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
});
And here's the code i'm using for reopening it:
这是我用来重新打开它的代码：
jQuery('#'+divpm_id).parent().css('display','block');
Suggestions/solutions?
建议/解决方案？
Thanks
谢谢
回答by Scott Greenfield
I tried some of the solutions posted here, but they don't work if the page has been scrolled prior to the dialog being opened. The problem is that it calculates the position without taking into account the scroll position, because the position is absolute during this calculation.
我尝试了此处发布的一些解决方案，但如果在打开对话框之前滚动页面，则它们不起作用。问题是它在计算位置时没有考虑滚动位置，因为在这个计算过程中位置是绝对的。
The solution I found was to set the dialog's parent's CSS to fixed PRIOR to opening the dialog.
我找到的解决方案是在打开对话框之前将对话框的父级 CSS 设置为固定。
$('#my-dialog').parent().css({position:"fixed"}).end().dialog('open');
This assumes that you have already initialized the dialog with autoOpen set to false.
这假设您已经在将 autoOpen 设置为 false 的情况下初始化了对话框。
Note, this does not work if the dialog is resizable. It must be initialized with resizing disabled in order for the position to remain fixed.
请注意，如果对话框可调整大小，这将不起作用。它必须在禁用调整大小的情况下进行初始化，以便位置保持固定。
$('#my-dialog').dialog({ autoOpen: false, resizable: false });
Tested this thoroughly and have found no bugs so far.
对此进行了彻底的测试，到目前为止没有发现任何错误。
回答by msander
I combined some suggested solutions to the following code. Scrolling, moving and resizing works fine for me in Chrome, FF and IE9.
我结合了以下代码的一些建议解决方案。在 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);
}
});
Update:
更新：
If you want to make it default for all dialogs:
如果要将其设为所有对话框的默认值：
$.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();
};
回答by Dag H?idahl
I could not get Scott's answer to work with jQuery UI 1.9.1. My solution is to reposition the dialog in a callback from the openevent. First set the css position to fixed. Then position the dialog where you want it:
我无法得到 Scott 使用 jQuery UI 1.9.1 的答案。我的解决方案是在open事件的回调中重新定位对话框。首先将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
});
Note: As noted in another answer, resizing the dialog will set its position to absoluteagain, so I've disabled resizable.
注意：如另一个答案中所述，调整对话框大小会将其位置再次设置为绝对位置，因此我已禁用resizable。
回答by wolfmanx
Bsed on Langdons'scomment above, I tried the following, which works fine with jQuery-UI 1.10.0 and resizable dialogs:
基于Langdons上面的评论，我尝试了以下操作，它适用于 jQuery-UI 1.10.0 和可调整大小的对话框：
$('#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');
}
});
回答by kingjeffrey
try:
尝试：
$(document).ready(function() {
$('#myDialog').dialog({dialogClass: "flora"});
$('.flora.ui-dialog').css({position:"fixed"});
)};
回答by Э?ad Дьdulя?мaи
Force your dialog box's position to be position:fixedusing CSS
强制您的对话框位置position:fixed使用 CSS
$('.selector').dialog({ dialogClass: 'myPosition' });
and define the myPosition css class as:
并将 myPosition css 类定义为：
.myPosition {
position: fixed;
}
回答by Blueming
$("#myDilog").dialog({
create:function(){
$(this).parent().css({position:"fixed"});
}
});
回答by cjbarth
While similar to some of the other answers above, I've found that I had to do more than just position: fixthe dialog, but I also had to position: staticit's content to keep it attached to the dialog.
虽然与上面的其他一些答案类似，但我发现我必须做的不仅仅是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' });
After this, I could call .dialog('open')any time I wanted and it would simply appear where I left it. I actually have this in a function that will return the existing dialog or create a new one as needed and then I just change the values of the dialog before .dialog('open')gets called.
在此之后，我可以随时拨打电话.dialog('open')，它只会出现在我离开的地方。我实际上在一个函数中使用了它，该函数将返回现有对话框或根据需要创建一个新对话框，然后我只是在.dialog('open')调用之前更改对话框的值。
回答by Enrico
As i wrote in my blog https://xbrowser.altervista.org/informatica-portata/jquery-easyui-bug-fix-window-dialog-position-widget/I've found a bug in “window” element or “dialog” element. When you instantiate this widget, it go out of the main window browser, in particular in top and left position (when you drag o resize it). To resolve this problem i've implemented this solution.
正如我在我的博客https://xbrowser.altervista.org/informatica-portata/jquery-easyui-bug-fix-window-dialog-position-widget/ 中所写的，我 在“window”元素或“dialog”中发现了一个错误“ 元素。当您实例化这个小部件时，它会离开主窗口浏览器，特别是在顶部和左侧位置（当您拖动或调整它的大小时）。为了解决这个问题，我已经实施了这个解决方案。
You can read the source code below:
你可以阅读下面的源代码：
$(dialog).window({
onMove: function(left, top) {
if (left < 0 || top < 0) {
left = (left < 0) ? 0 : left;
top = (top < 0) ? 0 : top;
$(this).window('move', {left: left, top: top});
}
},
onResize: function(width, height) {
var opt = $(this).window("options");
var top = opt.top;
var left = opt.left;
if (top < 0) {
top = (top < 0) ? 0 : top;
$(this).window('move', {left: left, top: top});
}
}
}).window("open");
The same code is for dialog:
$(dialog).dialog({
onMove: function(left, top) {
if (left < 0 || top < 0) {
left = (left < 0) ? 0 : left;
top = (top < 0) ? 0 : top;
$(this).dialog('move', {left: left, top: top});
}
},
onResize: function(width, height) {
var opt = $(this).window("options");
var top = opt.top;
var left = opt.left;
if (top < 0) {
top = (top < 0) ? 0 : top;
$(this).dialog('move', {left: left, top: top});
}
}
}).dialog("open");
Futhermore, when you call “$(this).window(“options”);” inside “onResize” method, and start your App,
you don't see the window; so i must insert the “.window(“open”);” at the and of declaration of dialog.
此外，当您$(this).window(“options”);在“onResize”方法中调用“ ”并启动您的应用程序时，您看不到窗口；所以我必须插入“.window(“open”);” 在对话框声明的和。
I hope to help you.
我希望能帮助你。
回答by coolguy97
$('#myDialog').dialog({ dialogClass: "flora" });
$('.flora.ui-dialog').css({ top: "8px" });
this will keep the dialog on top position no matter were we have clicked.
无论我们点击了什么，这都会使对话框保持在顶部位置。
