jQuery UI：如何自己使用ui-widget-overlay？

我正在尝试创建一个覆盖，类似于jQuery UI Dialog使用的覆盖。 我可以像这样创建叠加层：

var $overlay = $('
').hide().appendTo('body'); //...later in my script $overlay.fadeIn(); 

但是当我向下滚动时，叠加会中断。 我注意到jQuery UI动态地设置了该div的宽度和高度。 所以我想重用这个function而不是重新发明轮子。 如何创建这样的叠加层，或者在jQuery UI中重用它？

解：

将叠加层的宽度/高度设置为文档的宽度/高度，然后在窗口resize事件上绑定一个函数以调整叠加宽度/高度以匹配新文档的宽度/高度：

 $(document).ready(function(){ var $overlay = $('
').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()); } 

请注意，只要文档的高度发生变化（添加元素，向下滑动动画元素等），您就需要调整叠加层的大小。

Answer 1

你可以这样做：

Answer 2

从jQuery 1.4.4开始，它看起来很简单：

 $.ui.dialog.overlay.create(); 

更新

这是一个小提琴 。

上面的代码返回HTML元素，因此它应该像这样使用：

 $("body").append($.ui.dialog.overlay.create()); 

更新2

如前所述，这在jquery 1.10中不起作用。 为了解决这个问题，我创建了自己的叠加层：

（图像只是我想在中间显示的随机图像，表示页面正在加载）然后我添加了这个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()来隐藏和删除它。

我不得不在这里调整答案： 堆栈溢出响应

Answer 3

这是一个老问题，但我偶然发现了它，并且自此提出了一个对我来说更简单的解决方案（在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中看到它的实际效果

Answer 4

这很简单，创建叠加只需使用此代码：

 var overlay = new $.ui.dialog.overlay(); 

当你必须销毁它时使用以下代码：

 overlay.destroy(); 

Answer 5

以下是CSS的思路：

 .ui-widget-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #444; /* add some opacity here */ } 

Answer 6

我知道现在为这个问题给出答案为时已晚，但是添加这两个函数的方法更简单

 open: function() { $('.ui-widget-overlay').css('position', 'fixed'); }, close: function() { $('.ui-widget-overlay').css('position', 'absolute'); } , 

Answer 7

这对于奇怪的屏幕或框架集更有效：

 var overlay = $('
').hide().appendTo($('body')); $(overlay).width('100%'); $(overlay).height('100%'); $(overlay).fadeIn(); 

看看： http ： //jsfiddle.net/techunter/MdjBr/6/

Answer 8

检查：var $ dial = $（”）; $ dial.dialog（{模式：真}）; $（ ‘UI的对话。’）隐藏（）。

Answer 9

 var overlay = $('
').hide().appendTo($('body')); $(overlay).width('100%'); $(overlay).height('100%'); $(overlay).fadeIn();