jQuery 고정레이어 팝업
페이지 정보
작성자 서방님 댓글 0건 조회 177회 작성일 13-11-08 16:42본문
출처 : http://mylko72.maru.net/jquerylab/study/layer-popup.html
설명 예제-1은 흔히 사용하는 레이어 팝업으로 크기에 상관없이 항상 화면의 중앙에 뜬다.(가로만)
- layer_open(el)
- - el : 레이어 팝업의 ID
HTML
01.<A class=btn-example onclick="layer_open('layer1');return false;" href="#">예제-1 보기</A> 02.<DIV id=layer1 class=pop-layer> 03. <DIV class=pop-container> 04. <DIV class=pop-conts> 05. <!--content //-->06. <P class="ctxt mb20">Thank you.<BR> 07. Your registration was submitted successfully.<BR> 08. Selected invitees will be notified by e-mail on JANUARY 24th.<BR><BR> 09. Hope to see you soon! 10. </P> 11. <DIV class=btn-r> 12. <A class=cbtn href="#">Close</A> 13. </DIV> 14. <!--// content-->15. </DIV> 16. </DIV> 17.</DIV> CSS
1.<style type="text/css"> 2. .pop-layer {display:none; position: absolute; top: 50%; left: 50%; width: 410px; height:auto; background-color:#fff; border: 5px solid #3571B5; z-index: 10;} 3. .pop-layer .pop-container {padding: 20px 25px;} 4. .pop-layer p.ctxt {color: #666; line-height: 25px;} 5. .pop-layer .btn-r {width: 100%; margin:10px 0 20px; padding-top: 10px; border-top: 1px solid #DDD; text-align:right;} 6. 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;} 7. a.cbtn:hover {border: 1px solid #091940; background-color:#1f326a; color:#fff;} 8.</style> Javascript
01.<script type="text/javascript"> 02. function layer_open(el){ 03. var temp = $('#' + el); //레이어의 id를 temp변수에 저장 04. var bg = temp.prev().hasClass('bg'); //dimmed 레이어를 감지하기 위한 boolean 변수 05. if(bg){ 06. $('.layer').fadeIn(); 07. }else{ 08. temp.fadeIn(); //bg 클래스가 없으면 일반레이어로 실행한다. 09. } 10. // 화면의 중앙에 레이어를 띄운다. 11. if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px'); 12. else temp.css('top', '0px'); 13. if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px'); 14. else temp.css('left', '0px'); 15. temp.find('a.cbtn').click(function(e){ 16. if(bg){ 17. $('.layer').fadeOut(); 18. }else{ 19. temp.fadeOut(); //'닫기'버튼을 클릭하면 레이어가 사라진다. 20. } 21. e.preventDefault(); 22. }); 23. $('.layer .bg').click(function(e){ 24. $('.layer').fadeOut(); 25. e.preventDefault(); 26. }); 27. } 28.</script> - 설명
- 예제-2는 Dimmed 레이어 팝업으로 배경이 회색으로 Dimmed가 되고 레이어는 스크롤과 상관없이 항상 화면의 중앙에 고정이 된다.
닫기 버튼을 클릭하거나 배경을 클릭하면 레이어팝업이 닫힌다.- layer_open(el)
- - el : 레이어 팝업의 ID
HTML
01.<A class=btn-example onclick="layer_open('layer2');return false;" href="#">예제-2 보기</A> 02.<DIV class=layer> 03. <DIV class=bg></DIV> 04. <DIV id=layer2 class=pop-layer> 05. <DIV class=pop-container> 06. <DIV class=pop-conts> 07. <!--content //-->08. <P class="ctxt mb20">Thank you.<BR> 09. Your registration was submitted successfully.<BR> 10. Selected invitees will be notified by e-mail on JANUARY 24th.<BR><BR> 11. Hope to see you soon! 12. </P> 13. <DIV class=btn-r> 14. <A class=cbtn href="#">Close</A> 15. </DIV> 16. <!--// content-->17. </DIV> 18. </DIV> 19. </DIV> 20.</DIV> CSS
01.<style type="text/css"> 02. .layer {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;} 03. .layer .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);} 04. .layer .pop-layer {display:block;} 05. .pop-layer {display:none; position: absolute; top: 50%; left: 50%; width: 410px; height:auto; background-color:#fff; border: 5px solid #3571B5; z-index: 10;} 06. .pop-layer .pop-container {padding: 20px 25px;} 07. .pop-layer p.ctxt {color: #666; line-height: 25px;} 08. .pop-layer .btn-r {width: 100%; margin:10px 0 20px; padding-top: 10px; border-top: 1px solid #DDD; text-align:right;} 09. 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;} 10. a.cbtn:hover {border: 1px solid #091940; background-color:#1f326a; color:#fff;} 11.</style> Javascript
01.<script type="text/javascript"> 02. function layer_open(el){ 03. var temp = $('#' + el); 04. var bg = temp.prev().hasClass('bg'); //dimmed 레이어를 감지하기 위한 boolean 변수 05. if(bg){ 06. $('.layer').fadeIn(); //'bg' 클래스가 존재하면 레이어가 나타나고 배경은 dimmed 된다. 07. }else{ 08. temp.fadeIn(); 09. } 10. // 화면의 중앙에 레이어를 띄운다. 11. if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px'); 12. else temp.css('top', '0px'); 13. if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px'); 14. else temp.css('left', '0px'); 15. temp.find('a.cbtn').click(function(e){ 16. if(bg){ 17. $('.layer').fadeOut(); //'bg' 클래스가 존재하면 레이어를 사라지게 한다. 18. }else{ 19. temp.fadeOut(); 20. } 21. e.preventDefault(); 22. }); 23. $('.layer .bg').click(function(e){ //배경을 클릭하면 레이어를 사라지게 하는 이벤트 핸들러 24. $('.layer').fadeOut(); 25. e.preventDefault(); 26. }); 27. } 28.</script> 댓글목록
등록된 댓글이 없습니다.
