|
[JQUERY] div 화면채우기 (화면잠금) |
화면잠금 테스트하기
<!DOCTYPE html>
<html>
<head>
<style>
#mask {
display:none;
background-color:black;
cursor:hand;
position:absolute;
left:0px;
top:0px;
}
#content_div{
background-color:pink;
display: none;
position: absolute;
width:300px;
height:200px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
//윈도우 onload
$(document).ready(function(){
$("#rock").click(function(){
var maskHeight = document.body.offsetHeight;
//마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
$('#mask').css({'width': '100%','height': maskHeight });
$('#mask').fadeTo("slow",0.3);
var dialog = $('#content_div');
var left = ( $(window).scrollLeft() + ($(window).width() - dialog.width()) / 2 );
var top = ( $(window).scrollTop() + ($(window).height() - dialog.height()) / 2 );
dialog.css({'left':left,'top':top, 'position':'absolute'});
dialog.show();
});
// 마스크 클릭시 마스크 제거
$("#mask").click(function(){
//$("#mask").fadeOut(300);
//$("#content_div").fadeOut(1000);
$('#mask').hide();
$("#content_div").hide();
});
//esc키 누르면 화면 잠김 해제
$(document).keydown(function(event){
if(event.which=='27'){
$("#mask").fadeOut(300);
$("#content_div").fadeOut(1000);
}
});
});
function resize_slide(){
//윈도우가 resize될때마다 content_div 조정
var width = $(document).width();
var height = $(document).height();
var dialog = $("#content_div");
var top = ( $(window).scrollTop() + ($(window).height() - dialog.height()) / 2 );
dialog.css("top", top);
dialog.css("left",(width/2)-150);
}
$(window).load(resize_slide).resize(resize_slide).scroll(resize_slide);
</script>
</head>
<body>
<div id="mask" style="z-index:100;"></div>
<div id="content_div" style="z-index:150;display:none;">
중앙정렬된 숨겨진 레이어
</div>
<input type="button" id="rock" value="화면 잠김"/>
</body>
</html>
중앙정렬된 숨겨진 레이어
'프로그램 > JQUERY' 카테고리의 다른 글
| [JQUERY] $.ajax() 사용방법 (0) | 2014.08.11 |
|---|