我正在尝试创建一个覆盖图,类似于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());
}
请注意,每当文档的高度发生变化(添加元素、向下滑动的动画元素等)时,您将需要调整覆盖的大小。
https://stackoverflow.com/questions/3782944
复制相似问题