jquery
배경 어둡게 레이어 팝업
aneyh.c
2012. 2. 17. 17:30
bg_black2_브라우저전체.zip<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Layer Popup</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="./preset.css" />
<style type="text/css">
.layer_area {position:absolute; left:50%; top:50%; background:#fff; padding:20px; border:4px solid #ddd;}
</style>
</head>
<body>
<div style="margin:30px;">
<span class="button medium"><a href="#" id="layer_open">팝업창 열기</a></span>
</div>
<div class="layer">
<div class="bg"></div>
<div class="layer_area" id="layer1">
<p style="width:400px; ">이 것은 팝업창입니다. </p><br />
<span class="button medium"><a href="#" id="layer_close">팝업창 닫기</a></span>
</div>
</div>
<script type="text/javascript">
jQuery(function($){
function layer_open(el){
$('.layer').fadeIn();
var temp = $('#' + el);
if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
else temp.css('top', '0px');
if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
else temp.css('left', '0px');
}
$('#layer_open').click(function(){
layer_open('layer1');
return false;
});
$('#layer_close').click(function(){
$('.layer').fadeOut();
return false;
});
$(document).ready(function(){
});
});
</script>
</body>