연관 : http://motolies.tistory.com/291
<!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 runat="server">
<title></title>
<style type="text/css">
.layer
{
display: none;
position: fixed;
_position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
.layer .bg
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .5;
filter: alpha(opacity=50);
}
.layer .pop-layer
{
display: block;
}
.pop-layer
{
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 410px;
height: auto;
background-color: #fff;
border: 5px solid #3571B5;
z-index: 10;
}
.pop-layer .pop-container
{
padding: 20px 25px;
}
.pop-layer p.ctxt
{
color: #666;
line-height: 25px;
}
.pop-layer .btn-r
{
width: 100%;
margin: 10px 0 20px;
padding-top: 10px;
border-top: 1px solid #DDD;
text-align: right;
}
a.cbtn
{
display: inline-block;
height: 25px;
padding: 0 14px 0;
border: 1px solid #304a8a;
background-color: #3f5a9d;
font-size: 13px;
color: #fff;
line-height: 25px;
}
a.cbtn:hover
{
border: 1px solid #091940;
background-color: #1f326a;
color: #fff;
}
</style>
<script src="/jscript/jquery-1.10.1.min.js"
type="text/javascript"></script>
<script type="text/javascript">
function layer_open(el) {
var temp = $('#' +
el);
var bg = temp.prev().hasClass('bg'); //dimmed 레이어를 감지하기 위한 boolean 변수
if (bg) {
$('.layer').fadeIn(); //'bg'
클래스가 존재하면 레이어가 나타나고 배경은 dimmed 된다.
} else {
temp.fadeIn();
}
// 화면의 중앙에 레이어를 띄운다.
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');
temp.find('a.cbtn').click(function(e)
{
if (bg) {
$('.layer').fadeOut(); //'bg'
클래스가 존재하면 레이어를 사라지게 한다.
} else {
temp.fadeOut();
}
e.preventDefault();
});
$('.layer .bg').click(function(e)
{ //배경을 클릭하면 레이어를 사라지게 하는 이벤트 핸들러
$('.layer').fadeOut();
e.preventDefault();
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<a href="#" class="btn-example"
onclick="layer_open('layer2');return
false;">예제-2 보기</a>
<div class="layer">
<div class="bg">
</div>
<div id="layer2" class="pop-layer">
<div class="pop-container">
<div class="pop-conts">
<!--content //-->
<p class="ctxt
mb20">
Thank you.<br>
Your registration was submitted successfully.<br>
Selected invitees will be notified by e-mail on JANUARY 24th.<br>
<br>
Hope to see you soon!
</p>
<div class="btn-r">
<a
href="#"
class="cbtn">Close</a>
</div>
<!--// content-->
</div>
</div>
</div>
</div>
</form>
</body>
</html>
