티스토리 뷰

웹디자인

레이어팝업시 배경은 어둡게하기

깽아네 2018. 10. 11. 10:02
728x90

안녕하세요. 꿈꾸는여우입니다. 오늘은 홈페이지 코딩을 하면서 팝업에서 많이 쓰이는 부분을 포스팅 하려고 합니다. 레이어팝업을 띄우면서 주변은 어둡게 처리하는 방법에 대해서 알아보고자 합니다. 

 

 

 

 

1. <head></head>안에 입력한다.

 

<link type="text/css" rel="stylesheet" href="modalLayer.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.modalLayer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
 $('.open_modal').modalLayer();
});
</script>

 

※css와 js를 넣어둔 경로로 설정해야 한다.

 

 

2. body 안에 팝업할 부분을 설정한다.

 

<div class="modal m-regist" id="person_request" aria-hidden="true" aria-labelledby="modalTitle2" role="alertdialog">
    <h1 id="modalTitle2">이용약관 </h1>
    <div class="modal_box">
       <div class="modal_scroll">팝업내용</div>
    </div>
    <button type="button" class="closeModalLayer"><img src="../images/ico_x.gif" alt="닫기"></button>

</div>

<div class="modal m-regist" id="person_request2" aria-hidden="true" aria-labelledby="modalTitle2" role="alertdialog">
    <h1 id="modalTitle2">개인정보처리방침 </h1>
    <div class="modal_box">
       <div class="modal_scroll">팝업내용</div>
    </div>
    <button type="button" class="closeModalLayer"><img src="../images/ico_x.gif" alt="닫기"></button>

</div>


<span><a href="#person_request" class="open_modal">이용약관</a></span><span><a href="#person_request2" class="open_modal">개인정보처리방침</a></span>

 

※팝업 갯수에 따라 person_request 이부분이 늘어나고 줄어들면된다.

 

 

3. css안에 입력하여준다.

 

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:9999; padding:10px; display:none}
div.modal h1 {font-size:25px; padding-left:12px; padding-top:5px; color:#0387d1; }
div.modal button.closeModalLayer{overflow:hidden; *overflow:visible; padding:0; margin:0; line-height:0; width:40px; height:34px; position:absolute; top:15px; right:16px;}
div.m-regist{ width:596px; height:420px; background:#fff; border:#0387d1 solid 5px;}
div.m-regist div{padding:3px 0}

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


.modal_box {width:95%; height:350px; position:relative;   border:1px solid #d5d5d5; padding:5px 10px; font-size:14px; line-height:20px; margin:10px auto;}
.modal_scroll {height:330px; padding:5px 15px; overflow-y:scroll; overflow-x:hidden; line-height:20px;}
.modal_scroll p {line-height:20px; color:#666; padding:10px;};z-index:2;background-color:#000; opacity:0.4; filter: alpha(opacity=40); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; position:fixed; top:0; left:0; margin:0; padding:0; display:none}


 

 

4. 마지막으로 js를 ftp에 넣어주면 끝~~

 

jquery.modalLayer.js

 

728x90
저작자표시 비영리 동일조건

'웹디자인' 카테고리의 다른 글

absolute 가운데 정렬하는 css  (0) 2018.12.06
마우스 오버시 이미지 확대 css팁  (0) 2018.11.29
드롭다운메뉴 마우스오버시 하위메뉴 다운 (css적용)  (0) 2018.11.13
배경이미지 슬라이드 (페이드 인/아웃)  (0) 2018.10.11
파비콘 만들어 홈페이지 적용하기  (0) 2018.10.10