연관 : http://motolies.tistory.com/311
<script type="text/javascript">
$(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>
실사용 부분
//스크립트 부분
<script type="text/javascript">
$(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>
<input type="button" id="btnOverlay" value="오버레이" />
<div id="odiv"
class="ui-widget-overlay">
<input type="button"
id="btnOverlayEnd"
value="닫기" />
</div>
</body>
</html>
