레이어 박스

by hlee0126

HTML

<div class="login_wrap">
		<div class="login_cont">
			<div class="login_img"></div>
			<div class="login_form">
			  <div class="login_form_child">
			      <h1>User Login</h1>
				  <ul class="login_set">
				     <li><input type="text" placeholder="User ID" /></li>
				     <li><input type="password" placeholder="Password" /></li>
				  </ul>
				  <div class="login_check_info"><input type="checkbox" /> Remember ID 
				     <div class="language_combo">
					    <a href="#" class="language_combo_btn">Language</a>
						<ul>
					       <li><a href="">English</a></li>
						   <li><a href="">Korean</a></li>
					    </ul>
					 </div>
				  </div>
				  <button class="btn_login">Login</button>
				  <ul class="login_info">
				     <li>User registration is only available in the company’s internal system. </li>
				     <li>Changing password & Reset is only available in the company’s  internal system.</li>
				  </ul>
			  </div>
			</div>
		</div>
	</div>
  
  <a href="#" class="btn-example" onclick="layer_open('layer');return false;">레이어팝업</a>
	<div class="layer">
		<div class="bg"></div>
		<div id="layer" class="pop_layer">
			<div class="header">
				<h1>Change Password</h1>
				<button type="button" class="btn_close">Close</button>
			</div>
			<div class="pop_container">
				<div class="pw_box">
					<form method="post">
						<fieldset>
							<ul class="login_set">
						     <li><input type="password" placeholder="Currnent Password"></li>
						     <li><input type="password" placeholder="New Password"></li>
						     <li><input type="password" placeholder="Confirm Password"></li>
						  </ul>
						  <div class="ta_r">
							<button type="button" class="btn_cancel">Cancel</button>&nbsp; <button type="button" class="btn_submit">Save</button>
						</div>
						</fieldset>
					</form>
				</div>
			</div>
			<div class="footer_close ta_r">
				<button type="button" class="btn_close">Close</button>
			</div>
		</div>
	</div>

CSS

body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0; padding:0; font-family:arial,'µ¸¿ò',Dotum, Helvetica, Sans-serif; font-size:12px; color:#000; }
img,fieldset{border:none;}
ul,ol,li,dl,dt,dd{list-style:none}
em,address{font-style:normal}
::-webkit-input-placeholder {color:#999; }
::-moz-placeholder {color:#999; }
:-ms-input-placeholder {color:#999; }
input:-moz-placeholder {color:#999; }

.login_wrap {width:100%; position:absolute; top:50%; margin-top:-205px; }
.login_cont {width:980px; height:410px; background:#f5f6f8; margin:0 auto; overflow:hidden; position:relative; *zoom:1;}
.login_cont > div {float:left; box-sizing:border-box; }
.login_img {background:url('../images/login_img.png') 0 0 no-repeat; width:550px; height:409px; }
.login_form_child {margin:35px 60px 0; width:310px; }
.login_form_child * {font-family:"Dotum"; }
.login_form h1 {font-size:26px; color:#2480dd; font-weight:700; margin-bottom:23px; }
.login_set {margin-bottom:10px;}
.login_set li {margin-bottom:3px;}
.login_set input {border:1px solid #99a2b0; border-radius:2px; padding:10px; box-sizing:border-box; line-height:18px; width:100%; }
.btn_login {width:100%; padding:13px 0; background-color:#4297ed; border:1px solid #4297ed; border-radius:2px; color:#fff; text-align:center; font-weight:700; font-size:13px; }
.login_check_info {height:26px; line-height:26px; margin-bottom:10px; }
.login_check_info:after {display:block; clear:both; content:""; font-size:0; height:0; line-height:0; }
.login_check_info input {vertical-align:middle;}
.login_check_info .language_combo {float:right; position:relative; width:90px; height:21px; line-height:21px; cursor:pointer; }
.login_check_info .language_combo {background:url('../images/login_arrow.png') right 0 bottom 5px no-repeat; border-bottom:1px solid #4297ed; }
.login_check_info .language_combo a {color:#1584ef; text-decoration:none; }
.login_check_info .language_combo ul {position:absolute;...

JavaScript

$(".pjt_combo").hide();
				$(".pjt_combo_down").click(function(){
					var checkElement = $(this).parent().next();
					if((checkElement.is(".pjt_combo")) && (checkElement.is(":visible"))) {
						$(".pjt_combo:visible").hide(0,function(){
						   $(".pjt_combo_up").removeClass().addClass("pjt_combo_down");
						});
						return false;
					}
					if((checkElement.is(".pjt_combo")) && (!checkElement.is(":visible"))) {
						$(".pjt_combo:visible").hide(0,function(){
						   $(".pjt_combo_up").removeClass().addClass("pjt_combo_down");
						});
						checkElement.show(0,function(){
						   $(".pjt_combo_down").removeClass().addClass("pjt_combo_up");
						});
						return false;
					}
				});

				$(".language_combo ul").hide();
				$(".language_combo").click(function(){
					var checkElement = $(this).find('.language_combo_btn').next();
					if((checkElement.is("ul")) && (checkElement.is(":visible"))) {
						$(".language_combo ul:visible").hide();
						return false;
					}
					if((checkElement.is("ul")) && (!checkElement.is(":visible"))) {
						$(".language_combo ul:visible").hide();
						checkElement.show();
						return false;
					}
				});
        
        
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('.btn_close').click(function(e){
		if(bg){
			$('.layer').fadeOut(); //'bg' 클래스가 존재하면 레이어를 사라지게 한다. 
		}else{
			temp.fadeOut();
		}
		e.preventDefault();
	});

	$('.layer .bg').click(function(e){	//배경을 클릭하면 레이어를 사라지게 하는 이벤트...