Я пытаюсь создать наложение, подобное тому, которое использует jQuery UI Dialog. Я могу создать наложение следующим образом:
var $overlay = $('<div class="ui-widget-overlay"></div>').hide().appendTo('body');
//...later in my script
$overlay.fadeIn();
Но оверлей отключается, когда я прокручиваю вниз. Я заметил, что пользовательский интерфейс jQuery динамически устанавливает ширину и высоту этого div. Поэтому я хотел бы повторно использовать эту функциональность, а не изобретать колесо. Как я могу создать наложение, подобное этому, или повторно использовать его в пользовательском интерфейсе jQuery?
Решение:
Задайте ширину/высоту наложения как ширину/высоту документа, а затем привяжите функцию в событии изменения размера окна, чтобы настроить ширину/высоту наложения, чтобы соответствовать новой ширине/высоте документа:
$(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());
}
Обратите внимание, что всякий раз, когда высота документа изменяется (добавление элементов, анимация элементов, которые скользят вниз и т.д.), вам необходимо изменить размер оверлея.