[jQuery] Magnific Popup > 기술자료

본문 바로가기
사이트 내 전체검색

기술자료

JavaScript [jQuery] Magnific Popup

페이지 정보


본문

실무에서 사용하기 좋은 팝업 플러그인

플러그인 다운로드 : http://dimsemenov.com/plugins/magnific-popup/


<link rel="stylesheet" href="./js/magnific-popup.css">', 0);
?>
<script src="./js/jquery.magnific-popup.min.js"></script>
<style type="text/css">
  /**
   * Simple fade transition,
   */
  .mfp-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out; 
    -moz-transition: all 0.15s ease-out; 
    transition: all 0.15s ease-out;
  }
  .mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
  }
  .mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
  }

  .mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out; 
    -moz-transition: all 0.15s ease-out; 
    transition: all 0.15s ease-out;
  }
  .mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
  }
  .mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
  }
</style>
<script type="text/javascript">
  $(document).ready(function() {
    $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
      disableOn: 700,
      type: 'iframe',
      mainClass: 'mfp-fade',
      removalDelay: 160,
      preloader: false,

      fixedContentPos: false
    });
  });
</script>


<a href="https://www.youtube.com/watch?v=BzYnNdJhZQw" class="popup-youtube">동영상링크</a>



참고자료
http://demun.tistory.com/2440
 
추천0 비추천0

댓글목록

등록된 댓글이 없습니다.


Total 140건 1 페이지
  • RSS
기술자료 목록
140
JavaScript   568  2019-10-02 22:05 ~ 2019-10-04 16:13  
139
JavaScript   730  2019-05-02 02:10  
138
JavaScript   1771  2019-02-08 18:37 ~ 2019-02-08 19:32  
137
JavaScript   2838  2018-08-28 18:49  
136
JavaScript   6624  2018-08-02 14:39 ~ 2019-11-24 22:20  
135
JavaScript   1952  2018-07-25 14:30 ~ 2018-09-21 08:36  
134
JavaScript   1475  2018-07-23 14:43 ~ 2018-07-23 16:45  
열람
JavaScript   2544  2018-07-12 00:09  
132
JavaScript   7500  2018-05-15 02:11 ~ 2018-05-15 13:04  
131
JavaScript   5546  2018-03-15 04:15  
130
JavaScript   4034  2018-01-05 17:38 ~ 2018-06-25 01:19  
129
JavaScript   9931  2017-11-19 18:06  
128
JavaScript   11204  2017-09-20 07:12 ~ 2018-02-28 19:06  
127
JavaScript   5757  2017-04-18 18:14  
126
JavaScript   7673  2017-04-04 21:05  
125
JavaScript   8114  2017-02-21 14:10  
124
JavaScript   5939  2017-02-21 13:23 ~ 2019-09-18 20:55  
123
JavaScript   8326  2017-01-03 17:11 ~ 2019-10-16 16:12  
122
JavaScript   4233  2016-12-08 00:48  
121
JavaScript   7107  2016-12-06 02:28  

검색

계좌이체 or 신용카드 결제하기
해피정닷컴으로 대금결제를 할 수 있습니다

접속자집계

오늘
2,272
어제
1,368
최대
4,574
전체
5,380,760

회사명: 해피정닷컴   대표: 정창용   사업자번호: 119-05-36414   전화: 070-7600-3500   팩스: 032-679-3528
부천센터: 14526 경기도 부천시 옥산로168번길 34-1, 3층   서울센터: 08393 서울시 구로구 디지털로32가길 16, 1206-280호
개인정보보호책임자: 정창용   통신판매업신고: 2014-서울구로-0074 [사업자등록확인]   건강기능식품영업신고 제2018-0080452호
Copyright 2001~2020 해피정닷컴. All Rights Reserved.