jQuery UI:如何单独使用ui-widget-overlay？

Question

我正在尝试创建一个覆盖,类似于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());
}

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

Answer 1

从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()隐藏和删除它.

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

Answer 2

你可以这样做:

<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>

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 中查看它的实际效果