[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