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

}

</script>

실사용 부분

//스크립트 부분

$(document).ready(function() {

$("#odiv").hide();

$('#btnOverlay').click(function() {

$('#odiv').show();

$('.ui-widget-overlay').fadeIn();

setOverlayDimensionsToCurrentDocumentDimensions(); //remember to call this when the document dimensions change

});

$('#btnOverlayEnd').click(function() {

$('#odiv').hide();

$('.ui-widget-overlay').fadeOut();

});

$(window).resize(function() {

setOverlayDimensionsToCurrentDocumentDimensions();

});

});

function setOverlayDimensionsToCurrentDocumentDimensions() {

$('.ui-widget-overlay').width($(document).width());

$('.ui-widget-overlay').height($(document).height());

}

</script>

//html 부분

</head>

<body>

</div>

</body>

</html>

ui-widget-overlay 웹페이지 오버레이