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>
출처 : http://ghkdxodn.tistory.com/49
<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>
출처 : http://ghkdxodn.tistory.com/49
- 이전글javascript - 정규 표현식 21.02.10
- 다음글게시글에서 제목과 댓글 (제목 td 이상으로 넘어가는것 안 보이게 하기) 21.02.10
댓글목록
등록된 댓글이 없습니다.