jQuery UI:如何单独使用 ui-widget-overlay? [英] jQuery UI: How to use ui-widget-overlay by itself?

问题描述

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

I am trying to create an overlay, similar to the one that jQuery UI Dialog uses. I can create the overlay like this:

var $overlay = $('<div class="ui-widget-overlay"></div>').hide().appendTo('body');

//...later in my script
$overlay.fadeIn();

但是当我向下滚动时，覆盖层会被切断.我注意到 jQuery UI 正在动态设置该 div 的宽度和高度.所以我想重用这个功能而不是重新发明轮子.如何创建这样的叠加层，或在 jQuery UI 中重用叠加层?

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?

设置overlay的宽/高为文档的宽/高，然后在window resize事件上绑定一个函数来调整overlay的宽/高以匹配新文档的宽/高:

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:

$(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.

推荐答案

你可以这样做:

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

这篇关于jQuery UI:如何单独使用 ui-widget-overlay?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！