jQuery UI 模态对话框应该在滚动时固定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7584362/
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 Modal Dialog should be fixed on scroll
提问by Mutatos
Is there any possibility to fix the modal window for jQuery UI, so when the user is using the scroller on the right side, the side behind scrolls, but the modal window is staying fix?
是否有可能修复 jQuery UI 的模式窗口，因此当用户使用右侧的滚动条时，后面的一侧滚动，但模式窗口保持固定？
回答by Kevin Bowersox
Create a css class with the fixed position:
创建一个固定位置的css类：
.fixed-dialog{
position: fixed;
top: 50px;
left: 50px;
}
Then append the class as part of the options when you create the dialog:
然后在创建对话框时将类作为选项的一部分附加：
$( ".selector" ).dialog({ dialogClass: 'fixed-dialog' });
Here is a working Example: http://jsfiddle.net/3hrSv/The example is not too flashy because I couldn't get jsfiddle to style the dialog.
这是一个工作示例：http: //jsfiddle.net/3hrSv/该示例并不太浮华，因为我无法让 jsfiddle 设置对话框的样式。
If you would like to center the dialog in the middle of the screen try setting top:50%; left:50%;in your css as suggested by: http://css-tricks.com/320-quick-css-trick-how-to-center-an-object-exactly-in-the-center/
如果您想将对话框居中在屏幕中间，请尝试top:50%; left:50%;按照以下建议在您的 css 中设置：http: //css-tricks.com/320-quick-css-trick-how-to-center-an-object -正好在中心/
回答by James
If you want all of your dialogs to have this behavior, you can modify your jquery.ui.dialog.cssfile.
如果您希望所有对话框都具有此行为，您可以修改您的jquery.ui.dialog.css文件。
Change:
改变：
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
To:
到：
.ui-dialog { position: fixed; padding: .2em; width: 300px; overflow: hidden; }
or, if you want to preserve the original file, just add the line:
或者，如果您想保留原始文件，只需添加以下行：
div.ui-dialog {position:fixed;}
to one of your css files referenced by the page, or the style block on the page.
到页面引用的 css 文件之一，或页面上的样式块。
回答by Marin Popov
Or to apply the CSS when you create it:
或者在创建时应用 CSS：
$("#Modal").dialog({
autoOpen: false,
width: 500,
height: 'auto',
position: [50, 150],
create: function (event) {
$(event.target).parent().css({ 'position': 'fixed', "left": 50, "top": 150 });
}
});
回答by t_henderson
This is an old question, but I found that James' answer (to revise JQuery's div.ui-dialog to position:fixed) provided one-half of the answer to this question. The other half is this: Be sure that the height of the parent element is 100%. In my case, the body is the parent to my dialogs, so I have this line:
这是一个老问题，但我发现 James 的回答（将 JQuery 的 div.ui-dialog 修改为 position:fixed）提供了这个问题的一半答案。另一半是这样的：确保父元素的高度为 100%。在我的情况下，正文是我的对话框的父级，所以我有这一行：
<body style='height: 100%; min-height: 100%;'>
That, plus James' suggestion to add this to my CSS file:
再加上 James 建议将其添加到我的 CSS 文件中：
div.ui-dialog {position:fixed;}
... finally got my dialogs to appear at the center of the browser window and stay there while I scroll. Hope this helps future googlers who may pass through here.
...终于让我的对话框出现在浏览器窗口的中心，并在我滚动时停留在那里。希望这有助于未来可能通过这里的谷歌员工。
