我正在尝试创建一个覆盖，类似于jQuery UI Dialog使用的覆盖。我可以像这样创建叠加层：
var $overlay = $('<div class="ui-widget-overlay"></div>').hide().appendTo('body');
//...later in my script
$overlay.fadeIn();
但是当我向下滚动时，叠加层会切断。我注意到jQuery UI正在动态地设置该div的宽度和高度。所以我想重用这个功能而不是重新发明轮子。如何创建这样的叠加层，或者在jQuery UI中重用它？
将叠加层的宽度/高度设置为文档的宽度/高度，然后在窗口调整大小事件上绑定一个函数以调整叠加宽度/高度以匹配新文档的宽度/高度：
$(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());
}
请注意，只要文档的高度发生变化（添加元素，向下滑动动画元素等），您就需要调整叠加层的大小。
答案 0 :(得分：17)
从jQuery 1.4.4开始，它看起来很简单：
$.ui.dialog.overlay.create();
<强>更新
上面的代码返回HTML元素，因此它应该像这样使用：
$("body").append($.ui.dialog.overlay.create());
更新2
如前所述，这在jquery 1.10中不起作用。为了解决这个问题，我创建了自己的叠加层：
<div id="loading" style="display: none;">
<div class="loading-container">
<img src="/img/loading.gif"/>
</div>
</div>
（图片只是我想在中间显示的随机图片，表示页面正在加载） 然后我添加了这个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%;
}
然后，可以拨打$('#loading').show()和$('#loading').hide()来隐藏和删除它。
我必须在这里调整答案：stack overflow response
答案 1 :(得分：9)
你可以这样做：
<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>
答案 2 :(得分：4)
这是一个老问题，但我偶然发现了它，因此我想出了一个对我来说更简单的解决方案（在chrome / ie中测试过）。
以下与jquery ui的ui-widget-overlay结合使用的css类似乎可以解决这个问题：
.modalOverlay {
position: fixed;
width: 100%;
height: 100%;
z-index: 1001;
}
根据需要调整z-index。通过将固定位置和宽度/高度设置为100％，您无需调整叠加层的大小。
请注意，如果您允许，ui-widget-overlay会将位置覆盖为绝对位置。
在此jsfiddle
中查看此操作答案 3 :(得分：2)
创建叠加层非常简单，只需使用此代码：
var overlay = new $.ui.dialog.overlay();
当你必须销毁它时，请使用以下代码：
overlay.destroy();
答案 4 :(得分：1)
以下是CSS的想法：
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #444;
/* add some opacity here */
}
答案 5 :(得分：1)
我知道现在为这个问题提供答案为时已晚，但添加这两个函数的方法更简单
open: function() {
$('.ui-widget-overlay').css('position', 'fixed');
},
close: function() {
$('.ui-widget-overlay').css('position', 'absolute');
} ,
答案 6 :(得分：0)
这对于奇怪的屏幕或框架集更有效：
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();
答案 7 :(得分：0)
检查： var $ dial = $（＆＃39;＆＃39;）; $ dial.dialog（{模式：真}）; $（＆＃39;的.ui-对话框＆＃39）隐藏（）;
答案 8 :(得分：-2)
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();