출처 : http://mylko72.maru.net/jquerylab/study/layer-popup.html

연관 : 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">

.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>

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>

</div>

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>

<a href="#" class="cbtn">Close</a>

</div>

</div>

</div>

</div>

</div>

</form>

</body>

</html>

Jquery Div Layer Popup 고정 레이어 팝업