[ jquery ] 팝업 마스크 / 레이어 팝업 / 배경이 가려진 팝업 뛰우기
팝업을 사용할때 배경을 흐리게 만들어 팝업에 집중할 수 있게 효과를 주는 방법이다.
인터넷에서 조금만 검색을 해봐도 쉽게 찾을 수 있겠지만, 막상 또 만들어 쓰려고 하면 시간을 많이 잡아먹기 마련이다.
예전에 아주 유용하게 사용한 소스라서 저장해 두고 있다가 같이 공유해본다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr"> <title>배경이 가려진 레이어 팝업 뛰우기</title> <style> /* 마스크 뛰우기 */ #mask { position:absolute; z-index:9000; background-color:#000; display:none; left:0; top:0; } /* 팝업으로 뜨는 윈도우 css */ .window{ display: none; position:absolute; left:50%; top:50px; margin-left: -500px; width:1000px; height:500px; background-color:#FFF; z-index:10000; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> //<![CDATA[ function wrapWindowByMask(){ //화면의 높이와 너비를 구한다. var maskHeight = $(document).height(); var maskWidth = $(window).width(); //마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다. $("#mask").css({"width":maskWidth,"height":maskHeight}); //애니메이션 효과 - 일단 0초동안 까맣게 됐다가 60% 불투명도로 간다. $("#mask").fadeIn(0); $("#mask").fadeTo("slow",0.6); //윈도우 같은 거 띄운다. $(".window").show(); } $(document).ready(function(){ //검은 막 띄우기 $(".openMask").click(function(e){ e.preventDefault(); wrapWindowByMask(); }); //닫기 버튼을 눌렀을 때 $(".window .close").click(function (e) { //링크 기본동작은 작동하지 않도록 한다. e.preventDefault(); $("#mask, .window").hide(); }); //검은 막을 눌렀을 때 $("#mask").click(function () { $(this).hide(); $(".window").hide(); }); }); //]]> </script> </head> <body> <div id ="wrap"> <div id = "container"> <div id="mask"></div> <div class="window"> <p style="width:1000px;height:500px;text-align:center;vertical-align:middle;">팝업 내용 입력</p> <p style="text-align:center; background:#ffffff; padding:20px;"><a href="#" class="close">닫기X</a></p> </div> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center"> <a href="#" class="openMask">레이어 팝업 발생</a> </td> </tr> </table> </div> </div> </body> </html> | cs |
'웹프로그래밍 > JQUERY' 카테고리의 다른 글
| jQuery 타이머 / jQuery 타이머 만들기 / 스톱, 스타드 구현 (0) | 2019.11.01 |
|---|---|
| [ jquery ] 이미지 슬라이더 / 탭 슬라이더 / setInterval / 슬라이더 만들기 (2) | 2016.07.01 |
| jQuery 4일째 (ajax) (0) | 2014.07.31 |
IE10-Windows6.1-x64-ko-kr (2).z01
IE10-Windows6.1-x64-ko-kr (2).zip
