Popup Modal with jQuery

Web 프로그램/js, jQuery 2018. 4. 12. 11:17

728x90

깔끔한 모양의 팝업창처럼 보여주는 기능이다.

자세한 설명은

https://inspirationalpixels.com/tutorials/custom-popup-modal 을 참조하면 된다.

본 예제 코드는 첨부파일 참조

popup_jQuery.zip

=== import_header.php ===

<!DOCTYPE html>
<html lang="ko">
<head>
<?php $title='Home';include_once 'import_header.php';?>
</head>
<body>
<div class="container">
   <h3 align=center>설문조사</h3>
   <table class="table table-hover">
       <TR>
           <TD align=center>
               <a href="#" data-popup-open="popup-1">Open Popup</a>

               <div class="popup" data-popup="popup-1">
                   <div class="popup-inner">
                   <h3>jQuery 팝업 예시</h3>
                   <p>팝업할 본문 내용</p>
                   <p><a href="#" data-popup-close="popup-1">Close</a></p>
                   <a href="#" class="popup-close" data-popup-close="popup-1">x</a>
                   </div>
               </div>

           </TD>
       </TR>
       <TR>
           <TD align=center>
           Copyright(c) <?php echo date("Y"); ?>,
           <B><a href='http://link2me.tistory.com' target='_blank'>Survey</a></B> All Rights Reserved.</TD>
       </TR>
   </TABLE>
</div>
</body>
</html>

$(function() {
   //----- OPEN
   $('[data-popup-open]').on('click', function(e) {
       var targeted_popup_class = jQuery(this).attr('data-popup-open');
       $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
       e.preventDefault();
   });
   //----- CLOSE
   $('[data-popup-close]').on('click', function(e) {
       var targeted_popup_class = jQuery(this).attr('data-popup-close');
       $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
       e.preventDefault();
   });
});

/* Outer */
.popup {
    width:100%;
    height:100%;
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    background:rgba(0,0,0,0.75);
}

/* Inner */
.popup-inner {
   max-width:700px;
   width:90%;
   padding:40px;
   position:absolute;
   top:50%;
   left:50%;
   -webkit-transform:translate(-50%, -50%);
   transform:translate(-50%, -50%);
   box-shadow:0px 2px 6px rgba(0,0,0,1);
   border-radius:3px;
   background:#fff;
}
/* Close Button */
.popup-close {
   width:30px;
   height:30px;
   padding-top:4px;
   display:inline-block;
   position:absolute;
   top:0px;
   right:0px;
   transition:ease 0.25s all;
   -webkit-transform:translate(50%, -50%);
   transform:translate(50%, -50%);
   border-radius:1000px;
   background:rgba(0,0,0,0.8);
   font-family:Arial, Sans-Serif;
   font-size:20px;
   text-align:center;
   line-height:100%;
   color:#fff;
}
.popup-close:hover {
   -webkit-transform:translate(50%, -50%) rotate(180deg);
   transform:translate(50%, -50%) rotate(180deg);
   background:rgba(0,0,0,1);
   text-decoration:none;
}

728x90

저작자표시 비영리

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

jQuery - input 배열 수 세기 (0)	2018.04.20
jQuery 체크박스 선택 여부 확인 (0)	2018.04.15
jQuery animate (2)	2018.02.14
jQuery addClass() (0)	2018.02.04
jQuery all Checked (0)	2018.01.23

Link2Me