Copy
<style type="text/css"> .layer {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;} .layer .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);} .layer .pop-layer {display:block;} .pop-layer {display:none; position: absolute; top: 50%; left: 50%; width: 410px; height:auto; background-color:#fff; border: 5px solid #3571B5; z-index: 10;} .pop-layer .pop-container {padding: 20px 25px;} .pop-layer p.ctxt {color: #666; line-height: 25px;} .pop-layer .btn-r {width: 100%; margin:10px 0 20px; padding-top: 10px; border-top: 1px solid #DDD; text-align:right;} a.cbtn {display:inline-block; height:25px; padding:0 14px 0; border:1px solid #304a8a; background-color:#3f5a9d; font-size:13px; color:#fff; line-height:25px;} a.cbtn:hover {border: 1px solid #091940; background-color:#1f326a; color:#fff;}</style> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <a href="#" class="btn-example" onclick="layer_open('layer2');return false;">예제-2 보기</a><div class="layer"> <div class="bg"></div> <div id="layer2" class="pop-layer"> <div class="pop-container"> <div class="pop-conts"> <!--content //--> <p class="ctxt mb20">Thank you.<br> Your registration was submitted successfully.<br> Selected invitees will be notified by e-mail on JANUARY 24th.<br><br> Hope to see you soon! </p> <div class="btn-r"> <a href="#" class="cbtn">Close</a> </div> <!--// content--> </div> </div> </div></div> <script type="text/javascript"> 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('a.cbtn').click(function(e){ if(bg){ $('.layer').fadeOut(); //'bg' 클래스가 존재하면 레이어를 사라지게 한다. }else{ temp.fadeOut(); } e.preventDefault(); }); $('.layer .bg').click(function(e){ //배경을 클릭하면 레이어를 사라지게 하는 이벤트 핸들러 $('.layer').fadeOut(); e.preventDefault(); }); } </script>
위와같은 레이어팝업소스를 구했습니다.
버튼을 클릭하면 배경에 검은색 암막이 깔리면서 화면 정가운데 고정으로 레이어 팝업이 뜨는 소스인데요..
이게 한개만 사용하면 문제가 되지 않는데
한화면에서 위 스크립트를 이용하여 여러개 버튼을 생성할 경우 오류가 납니다...
제가 디자이너라 있는소스를 조금 변형하는 수준밖에는 안되는데....
저기서 어떤부분을 고쳐야 디자인이 다른 여러개 레이어팝업을 한화면에서 띄울 수 있겠는지요 고수님들 도와주세요!!!!
답변 1개
채택된 답변
+20 포인트
port443
2015-12-10 (목) 11:27:41
음 현재 사용되는 부분은 다중레이어로 하면 수정되어야 할 부분이 많습니다.
http://www.blueb.co.kr/?r=home&c=1/24&uid=3196&page=view
위의 링크사이트를 참조하여 작업하는게 더 나을거 같습니다.
답변을 작성하려면 로그인이 필요합니다.