首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >jQuery UI:如何单独使用ui-widget-overlay?

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

Stack Overflow用户
提问于 2010-09-24 06:22:20
回答 8查看 55.2K关注 0票数 18

我正在尝试创建一个覆盖图,类似于jQuery UI对话框使用的覆盖图。我可以像这样创建覆盖图:

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());
}

请注意,每当文档的高度发生变化(添加元素、向下滑动的动画元素等)时,您将需要调整覆盖的大小。

EN

回答 8

Stack Overflow用户

回答已采纳

发布于 2010-09-24 07:05:01

你可以这样做:

<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>
票数 9
EN

Stack Overflow用户

发布于 2011-10-24 20:06:21

这是一个古老的问题,但我偶然发现了它,并从那以后想出了一个对我来说似乎更简单的解决方案(在chrome/ie中测试)。

下面的css类与jquery ui的ui-widget-overlay结合使用似乎可以做到这一点:

.modalOverlay {
   position: fixed;
   width: 100%;
   height: 100%;
   z-index: 1001;
}

根据需要调整z索引。通过使用固定位置和宽度/高度设置为100%,您不必调整覆盖的大小。

请注意,如果允许的话,ui-widget-overlay会将位置覆盖为绝对位置。

在此jsfiddle中查看它的实际效果

票数 5
EN

Stack Overflow用户

发布于 2013-09-05 21:10:58

这很简单,只需使用以下代码即可创建overlay:

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

当你不得不销毁它的时候,使用下面的代码:

overlay.destroy();
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3782944

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档