[jQuery] Magnific Popup > 기술자료

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

기술자료

JavaScript [jQuery] Magnific Popup

페이지 정보

댓글 0건 조회 55회 작성일 18-07-12 00:09

본문

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

플러그인 다운로드 : 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
 
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.


Total 2,248건 1 페이지
기술자료 목록
번호 제목
공지 일반
온라인 강좌를 소개합니다. ( update. 2017-12-05 16:33 ) Hit.16081
2247 PHP
2246 그누보드
[G5] scroll 상단으로 / 가운데로 / 하단으로 이동하기 ( update. 2018-07-20 21:01 ) 댓글+ 1 Hit.27
2245 JSP
2244 JSP
2243 HTML
2242 일반
2241 그누보드
2240 Linux
2239 제로보드
[XpressEngine] files 폴더의 비밀 ( update. 2018-07-13 21:51 ) Hit.47
2238 MySQL
열람중 JavaScript
[jQuery] Magnific Popup ( write. 2018-07-12 ) Hit.56
2236 일반
전자책 읽기에 최적화된 무료 EPUB 뷰어 ( update. 2018-07-11 17:27 ) Hit.69
2235 HTML
2234 HTML
2233 그누보드
ZeroBoard 4를 그누보드 5 로 변경 ( update. 2018-07-02 21:40 ) Hit.90
2232 Search
Bing (빙) 웹마스터도구 사이트 등록하기 ( update. 2018-07-01 02:41 ) Hit.120
2231 일반
IU 노래 181곡을 Youtube에서 연속듣기 ( update. 2018-07-04 23:09 ) Hit.128
2230 그누보드
2229 그누보드
XE -> 그누보드5 변경 v7 ( update. 2018-06-12 13:13 ) Hit.249
2228 제로보드
2227 호스팅
무료 호스팅을 제공하는 업체 ( update. 2018-06-12 03:53 ) Hit.195
2226 제로보드
[XpressEngine] 버전 확인하기 ( write. 2018-06-11 ) Hit.160
2225 제로보드
2224 호스팅
let's encrypt 지원하는 호스팅 ( write. 2018-06-07 ) Hit.176
게시물 검색

회원로그인

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

접속자집계

오늘
1,263
어제
1,405
최대
3,174
전체
4,135,289

회사명: 해피정닷컴   사업자번호: 119-05-36414   전화: 070-7600-3500   팩스: 02-865-3528   주소: 08394 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
대표: 정창용   개인정보보호책임자: 정창용   통신판매업신고번호: 2014-서울구로-0074 [사업자등록정보확인]   건강기능식품영업신고번호 제2018-0080452호
Copyright 2001~2018 해피정닷컴. All Rights Reserved.