jquery modal(레이어팝업) sample

스크립트 jquery.js(1.9버전으로 테스트했음) 상단 추가

/* 모달 오픈용 JS(이름은 알아서) */

/*
* jQuery Modal Layer- 0.9
* Copyright (c) 2013 nickname stryper http://gotoplay.tistory.com/
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
(function($){
$.fn.modalLayer = function(){
var $modals = this;
var $focus ="a[href], area[href], input:not([disabled]), input:not([readonly]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]";
var $radioCheck = "input[type='checkbox'], input[type='radio']";
$modals.click(function(e){
e.preventDefault();
var $this = $(this);
var $select_id = $($(this).attr('href'));
var $sel_id_focus = $select_id.find($focus);
var $focus_num = $select_id.find($focus).length;
var $closBtn = $select_id.find('.closeModalLayer');
var $checkLabel = $select_id.find($radioCheck);
var clickAnchor = $this.attr('href');
var hrefFocus = this;
var $leftP = ( $(window).scrollLeft() + ($(window).width() - $select_id.width()) / 2 );
var $topP = ( $(window).scrollTop() + ($(window).height() - $select_id.height()) / 2 );
$('body').append('<div class="overlay" tabindex="-1"></div>');
$select_id.css({ 'top':$topP ,'left':$leftP });
$select_id.attr('tabindex', '0').attr({'aria-hidden':'false','aria-live':'polit'}).fadeIn(100).focus();
$select_id.on('blur', function(){ $(this).removeAttr('tabindex'); });
$('div.overlay').fadeIn(300);
setTimeout(function() { $('div.overlay').css("height",$(document).height()); }, 10);
$(window).on("resize", function () { $('div.overlay').css("height",$(document).height()); }).resize();
$('#wrap').attr('aria-hidden','true');
$(clickAnchor).siblings().find($focus).attr('tabindex','-1');
$($select_id).find($focus).last().on("keydown", function(e){
if (e.which == 9) {
if(e.shiftKey) {
$($select_id).find($focus).eq($focus_num - 1).focus();
e.stopPropagation();
} else {
$($select_id).find($focus).eq(0).focus();
e.preventDefault();
};
};
});
$($select_id).find($focus).first().on("keydown", function(e){
if(e.keyCode == 9) {
if(e.shiftKey) {
$($select_id).find($focus).eq($focus_num - 1).focus();
e.preventDefault();
};
};
});
$($select_id).on("keydown", function(e){
if ( e.which == 27 ) {
$.fn.hide_modal ();
};
if( $(this).is(":focus") ){
if(e.keyCode == 9) {
if(e.shiftKey) {
$($select_id).find($focus).eq($focus_num - 1).focus();
e.preventDefault();
};
};
};
});
$($checkLabel).on("click", function(){ $(this).focus(); });
$closBtn.on("click", {msg:clickAnchor,msg2:hrefFocus},function(e){
$.fn.hide_modal (e.data.msg,e.data.msg2 );
});
});
$.fn.hide_modal = function (info, hrefFocus){
$(info).attr('aria-hidden','true').fadeOut(300);
$('#wrap').removeAttr('aria-hidden');
$(info).siblings().find($focus).removeAttr('tabindex');
$('div.overlay').fadeOut(100);
setTimeout(function() { $('div.overlay').remove(); }, 400);
$(info).find($radioCheck).prop('checked', false);
$(info).find("input[type='text']").val('');
setTimeout(function() { $(hrefFocus).focus(); }, 100);
};
};
})(jQuery);


/* css 파일 이름은 알아서 */
/*리셋*/
*{font-family: arial,'dotum', '돋움', Sans-serif;}
body{ font-size:11px; color:#555}
a{text-decoration:none; color:#666; font-weight:bold}
button, input[type="submit"], input[type="button"]{cursor:pointer}
button[type="submit"]{display:block; width:100px; margin:15px 0 15px 120px}
/*리셋*/
div.modal{position:absolute; z-index:100; padding:10px; display:none}
div.modal div.modal-inside{position:relative;}
div.modal h1{height:25px; overflow:hidden; display:block; font-size:16px}
div.modal button.closeModalLayer{overflow:hidden; *overflow:visible; padding:0; margin:0; line-height:0; width:40px; height:30px; position:absolute; top:15px; right:16px;}
div.modal fieldset legend, span.hide, p.hide {display:block;position:absolute;left:-9999px;width:1px;height:1px;line-height:0;overflow:hidden;font-size:0;text-indent:-9999px}
div.m-regist{ width:333px; background:#eee; border:#000 solid 3px;}
div.m-regist fieldset{padding:0 0 0 0;}
div.m-regist div{padding:3px 0}
div.m-regist div label{width:110px; overflow:hidden; display:inline-block; *display:inline; }
div.m-regist div label,
div.m-regist div input{line-height:14px; vertical-align:middle;}
div.m-regist div.m-input04 input,
div.m-regist div.m-input04 label{width:auto; display:inline;}
div.m-regist div.footer_txt{padding:5px 0 0 30px}
div.m-regist div.footer_txt img{vertical-align:top;}

/* 백보드 div */
div.overlay {width:100%;height:100%;z-index:2;background-color:#000; opacity:0.4; filter: alpha(opacity=40); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; position; top:0; left:0; margin:0; padding:0; display:none}

 

 

/* 화면View */

<div class="modal m-regist" id="person_request" aria-hidden="true" aria-labelledby="modalTitle2" role="alertdialog">
 <h1 id="modalTitle2"> 레이어 팝업</h1>
  <fieldset>
   <legend>팝업화면</legend>
   <div class="m-input01">
    <!--세로는 자동 리사이즈, 가로는 스크롤 발생.-->
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
     <!--컬럼타이틀 시작-->
    <tr>
     <td>테스트1</td>
     <td>테스트2</td>
     <td>테스트3</td>
     <td>테스트4</td>
    </tr>
    <tbody id="추가ID">
    </tbody>
    <tr>
     <td height="1" colspan="7" bgcolor="#cecece"></td>
    </tr>
    </table>
   </div>
   <input type="button" id="btnClose" class="closeModalLayer" />
  </fieldset>
</div>

 

<!-- 모달창 오픈 액션용 객체 시작-->
<p><a href="#" name="test_form" id="test_form" class="open_modal"></a></p>
<!-- 모달창 오픈 액션용 객체 끝-->