[jquery]layer popup

@charset "utf-8";

@font-face {
	font-family: ngttf;
	src: url(NanumGothic.ttf);
}

@font-face {
	font-family: ngeot;
	src: url(NanumGothic.eot);
}

* {
	margin: 0;
	padding: 0;
	font-family: ngeot, ngttf, Nanumgothic;
}

html,
body {
	_height: 100%;
	font-family: ngttf, ngeot;
}

img,
fieldset {
	border: 0;
}

form,
fieldset {
	margin: 0;
	padding: 0;
}

em,
address {
	font-style: normal;
}

button {
	margin: 0;
	padding: 0;
	overflow: visible;
	cursor: pointer;
}

a {
	text-decoration: none;
}

a:hover,
a:active,
a:focus {
	text-decoration: underline;
}

table {
	table-layout: fixed;
	border-collapse: collapse;
}

/* Button Common */
.button,
.button * {
	position: relative;
	margin: 0;
	padding: 0;
	display: inline-block;
	text-decoration: none !important;
	border: 0;
	font-size: 12px;
	white-space: nowrap;
	background: url(button.gif) no-repeat;
	vertical-align: top;
	overflow: visible;
	color: #333;
}

.button {
	margin-right: 4px;
}

.button * {
	left: 4px;
	cursor: pointer;
	_cursor: hand;
}

.button.medium,
.button.medium * {
	height: 24px;
	line-height: 21px;
}

/* 맑은고딕을 사용할 경우 21px, 돋움을 사용할 경우 24px 사용 */
.button.medium {
	background-position: left 0;
}

.button.medium * {
	padding: 0 10px 0 6px;
	font-size: 12px;
	background-position: right top;
}

/* Button Hover */
.button *:hover,
.button *:active,
.button *:focus {
	color: #06a;
}

/* Button Icon Variation */
.button.icon * {
	padding-left: 20px;
}

.button.icon span {
	width: 20px;
	margin-right: -20px;
	padding: 0 !important;
}

.button.medium .check {
	background-position: 4px -150px;
}

.button.medium .add {
	background-position: -16px -150px;
}

.button.medium .delete {
	background-position: -34px -150px;
}

.button.medium .calendar {
	background-position: -56px -150px;
}

.button.medium .refresh {
	background-position: -76px -150px;
}

.button.medium .download {
	background-position: -96px -151px;
}

/* Common Class */
.iText {
	border: 1px solid #b7b7b7;
	border-right-color: #e1e1e1;
	border-bottom-color: #e1e1e1;
	background: transparent;
}

.iCheck,
.iRadio {
	width: 13px;
	height: 13px;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

.hide {
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 1px;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
}

/* Popup Layer */
.layer {
	display: none;
	position: fixed;
	_position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
}

.open {
	display: block;
}

.layer .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .5;
	filter: alpha(opacity=50);
}

.layer_area {
	position: absolute;
	left: 50%;
	top: 50%;
	background: #fff;
	padding: 20px;
	border: 4px solid #ddd;
}

 jQuery(function($){ 	
 	function layer_open(el){ 		
    	//$('.layer').addClass('open'); 		
        $('.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 .bg').click(function(){
    	$('.layer').fadeOut();
    });
    $('#layer_close').click(function(){
    	$('.layer').fadeOut();
        return false;
    });
    $(document).ready(function(){ 	}); 
});

 

<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; text-align:justify; font-family:Malgun gothic;">이 것은 팝업창입니다.</p>
      <br />             <span class="button medium"><a href="#" id="layer_close">팝업창 닫기</a></span>         
   </div>
</div>

 

 

출처 : http://blog.nettor.com/jquery_popup/popup.html