15
2017-Aug
[jQuery] 레이어 팝업
작성자: 
Blonix
IP ADRESS: *.64.228.3 조회 수: 1489
출처:: http://vucket.com/index.php/topic/view/65
몇년전만 해도 많은 웹사이트에서 윈도우 팝업 창을 많이 띄웠었지만, 요즘은 레이어 팝업 통해 로그인 창이던지 메세지 창 등으로
활용하여 한 페이지에서 사용자가 여러개의 윈도우창 또는 탭에 관여하지 않아도 되도록 처리하는 웹사이트가 많이 있습니다.
하지만, 레이어 팝업은 디자인에 따라 자칫하면 사용자에게 팝업의 존재를 인지하지 못하는 경우가 발생할 수 있기 때문에
사이트 전체에 검은 마스크 배경을 불투명하게 하여 가운데에 레이어 팝업을 띄워주어 쉽게 인지 하도록 해주시는게 좋습니다.
추가적으로 검은 마스크 배경은 웹사이트 로딩 시 로딩바와 함께 사용할 수도 있습니다.
아래는 테스트를 위한 전체 소스코드 입니다.
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 | <!DOCTYPE html><html><head> <title>Mask, Layer popup</title> <style> .setDiv { padding-top: 100px; text-align: center; } .mask { position:absolute; left:0; top:0; z-index:9999; background-color:#000; display:none; } .window { display: none; background-color: #ffffff; height: 200px; z-index:99999; } </style></head><body><div class="setDiv"> <a href="#" class="showMask">검은 마스크와 레이어 팝업 띄우기</a> <div class="mask"></div> <div class="window"> <input type="button" href="#" class="close" value="가운데 띄워지는 레이어 팝업 입니다. (닫기)"/> </div></div></body><script type="text/javascript"> function wrapWindowByMask(){ // 화면의 높이와 너비를 변수로 만듭니다. var maskHeight = $(document).height(); var maskWidth = $(window).width(); // 마스크의 높이와 너비를 화면의 높이와 너비 변수로 설정합니다. $('.mask').css({'width':maskWidth,'height':maskHeight}); // fade 애니메이션 : 1초 동안 검게 됐다가 80%의 불투명으로 변합니다. $('.mask').fadeIn(1000); $('.mask').fadeTo("slow",0.8); // 레이어 팝업을 가운데로 띄우기 위해 화면의 높이와 너비의 가운데 값과 스크롤 값을 더하여 변수로 만듭니다. var left = ( $(window).scrollLeft() + ( $(window).width() - $('.window').width()) / 2 ); var top = ( $(window).scrollTop() + ( $(window).height() - $('.window').height()) / 2 ); // css 스타일을 변경합니다. $('.window').css({'left':left,'top':top, 'position':'absolute'}); // 레이어 팝업을 띄웁니다. $('.window').show(); } $(document).ready(function(){ // showMask를 클릭시 작동하며 검은 마스크 배경과 레이어 팝업을 띄웁니다. $('.showMask').click(function(e){ // preventDefault는 href의 링크 기본 행동을 막는 기능입니다. e.preventDefault(); wrapWindowByMask(); }); // 닫기(close)를 눌렀을 때 작동합니다. $('.window .close').click(function (e) { e.preventDefault(); $('.mask, .window').hide(); }); // 뒤 검은 마스크를 클릭시에도 모두 제거하도록 처리합니다. $('.mask').click(function () { $(this).hide(); $('.window').hide(); }); });</script></html> |
