jQuery UI：如何单独使用 ui-widget-overlay？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3782944/
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: How to use ui-widget-overlay by itself?
提问by Andrew
I am trying to create an overlay, similar to the one that jQuery UI Dialog uses. I can create the overlay like this:
我正在尝试创建一个叠加层，类似于 jQuery UI Dialog 使用的叠加层。我可以像这样创建叠加层：
var $overlay = $('<div class="ui-widget-overlay"></div>').hide().appendTo('body');
//...later in my script
$overlay.fadeIn();
But the overlay cuts off when I scroll down. I noticed that jQuery UI is setting the width and height on that div dynamically. So I would like to reuse this functionality instead of reinventing the wheel. How can I create an overlay like this, or reuse the one in jQuery UI?
但是当我向下滚动时，覆盖层会切断。我注意到 jQuery UI 正在动态设置该 div 的宽度和高度。所以我想重用这个功能而不是重新发明轮子。如何创建这样的叠加层，或在 jQuery UI 中重用叠加层？
Solution:
解决方案：
Set the width/height of the overlay to be the width/height of the document, then bind a function on the window resize event to adjust the overlay width/height to match the new document width/height:
将叠加层的宽度/高度设置为文档的宽度/高度，然后在window resize事件上绑定一个函数来调整叠加层的宽度/高度以匹配新文档的宽度/高度：
$(document).ready(function(){
var $overlay = $('<div class="ui-widget-overlay"></div>').hide().appendTo('body');
$('.trigger').click(function(){
$('div').slideDown();
$('.ui-widget-overlay').fadeIn();
setOverlayDimensionsToCurrentDocumentDimensions(); //remember to call this when the document dimensions change
});
$(window).resize(function(){
setOverlayDimensionsToCurrentDocumentDimensions();
});
});
function setOverlayDimensionsToCurrentDocumentDimensions() {
$('.ui-widget-overlay').width($(document).width());
$('.ui-widget-overlay').height($(document).height());
}
Note that whenever the height of the document changes (adding elements, animating elements that slide down, etc), you will need to resize the overlay.
请注意，每当文档的高度发生变化（添加元素、向下滑动的动画元素等）时，您都需要调整叠加层的大小。
采纳答案by fehays
You could do something like this:
你可以这样做：
<style type="text/css">
* {border:0;margin:0}
.ui-widget-overlay {
background: repeat-x scroll 50% 50% #AAA;
opacity:0.3;
}
.ui-widget-overlay {
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
}
</style>
<script type="text/javascript">
$(function () {
var $overlay = $('<div class="ui-overlay"><div class="ui-widget-overlay"></div></div>').hide().appendTo('body');
$overlay.fadeIn();
$(window).resize(function () {
$overlay.width($(document).width());
$overlay.height($(document).height());
});
});
</script>
回答by isaaclw
As of jQuery 1.4.4, it looks like it's as easy as:
从 jQuery 1.4.4 开始，它看起来很简单：
$.ui.dialog.overlay.create();
Update
更新
The code above returns the HTML element, so it should be use like this:
上面的代码返回 HTML 元素，所以它应该像这样使用：
$("body").append($.ui.dialog.overlay.create());
Update 2
更新 2
As was said, this doesn't work in jquery 1.10. To fix this, I created my own overlay:
如前所述，这在 jquery 1.10 中不起作用。为了解决这个问题，我创建了自己的叠加层：
<div id="loading" style="display: none;">
<div class="loading-container">
<img src="/img/loading.gif"/>
</div>
</div>
(the image is just a random image I wanted to display in the middle to indicate that the page was loading) Then I added this CSS:
（图像只是我想在中间显示的随机图像以指示页面正在加载）然后我添加了这个 CSS：
/* loading overlays */
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 10000;
}
.loading-container {
position:fixed;
top: 50%;
left: 50%;
}
Then one can call $('#loading').show()and $('#loading').hide()to hide and remove it.
然后可以调用$('#loading').show()和$('#loading').hide()来隐藏和删除它。
I had to tweak the answer here: stack overflow response
我不得不在这里调整答案：堆栈溢出响应
回答by LOAS
This is an old question, but I stumbled on it and have since come up with a solution that seems simpler to me (tested in chrome/ie).
这是一个老问题，但我偶然发现了它，并提出了一个对我来说似乎更简单的解决方案（在 chrome/ie 中测试）。
The following css class used in conjunction with jquery ui's ui-widget-overlay seems to do the trick:
以下与 jquery ui 的 ui-widget-overlay 结合使用的 css 类似乎可以解决问题：
.modalOverlay {
position: fixed;
width: 100%;
height: 100%;
z-index: 1001;
}
Tweak the z-index as necessary. By using fixed position and width/height set to 100%, you don't have to resize the overlay.
根据需要调整 z-index。通过使用固定位置和宽度/高度设置为 100%，您不必调整叠加层的大小。
Note that ui-widget-overlay will override position to absolute, if you let it.
请注意，如果您允许，ui-widget-overlay 会将位置覆盖为绝对位置。
See it in action in this jsfiddle
在这个jsfiddle 中查看它的实际效果
回答by Sabeeh Chaudhry
It's very simple, to create overlay just use this code:
非常简单，只需使用以下代码即可创建叠加层：
var overlay = new $.ui.dialog.overlay();
and when you have to destroy it use this code:
当您必须销毁它时，请使用以下代码：
overlay.destroy();
回答by Amol
I know this is too late to give answer for this question but simpler way to add this two function
我知道现在回答这个问题为时已晚，但添加这两个函数的方法更简单
open: function() {
$('.ui-widget-overlay').css('position', 'fixed');
},
close: function() {
$('.ui-widget-overlay').css('position', 'absolute');
} ,
回答by codeinthehole
Here's a thought for your CSS:
这是您的 CSS 的想法：
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #444;
/* add some opacity here */
}
回答by TecHunter
this will work better for weird screens or with framesets :
这对于奇怪的屏幕或框架集会更有效：
var overlay = $('<div class="ui-overlay" style="position: absolute; top: 0pt; left: 0pt; display: inline-block; overflow: hidden;"><div class="ui-widget-overlay" style="top: 0pt; left: 0pt; width: 9999px; height: 99999px;"></div></div>').hide().appendTo($('body'));
$(overlay).width('100%');
$(overlay).height('100%');
$(overlay).fadeIn();
check it out: http://jsfiddle.net/techunter/MdjBr/6/
回答by Frederic
Check that: var $dial=$(''); $dial.dialog({modal:true}); $('.ui-dialog').hide();
检查： var $dial=$(''); $dial.dialog({modal:true}); $('.ui-dialog').hide();
回答by Viking
var overlay = $('<div class="ui-overlay" style="position: absolute; top: 0pt; left: 0pt; display: inline-block; overflow: hidden;"><div class="ui-widget-overlay" style="top: 0pt; left: 0pt;"></div></div>').hide().appendTo($('body'));
$(overlay).width('100%');
$(overlay).height('100%');
$(overlay).fadeIn();
