问题描述
我正在尝试创建一个覆盖,类似于jQuery UI对话框使用的覆盖.我可以这样创建叠加层:
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?
将覆盖层的宽度/高度设置为文档的宽度/高度,然后在窗口调整大小事件上绑定一个函数,以调整覆盖层的宽度/高度以匹配新文档的宽度/高度:
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?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!