jquery popup plugins 실무에서 사용하기 좋은 팝업 플러그인 Magnific Popup

이전에는 bpopup 을 사용했었는데 IE 버젼에서 오작동이 있는 바람에 다른 플러그인을 찾아봤습니다. 

홈페이지를 살펴보니 IE 10을 지원한다는 말이 없었습니다. 잘 되다가도 어떤 상황에서는 안되는데 원인을 모르겠으며, ie10 에서 나오는 문제였다

조건은 이렇습니다.

• IE 8이상 버젼을 지원해야 한다(IE7은 선택)
• 모바일을 지원하면 좋다
• ajax 또는 ifram이든 html 페이지를 불러와야 한다
• 동영상등을 팝업으로 띄울수 있어야 한다

추천하는 플로그인을 바로 Magnific Popup -> http://dimsemenov.com/plugins/magnific-popup/

예제는 홈페이지에서 클릭하면서 볼 수 있으며 상단의 documention 을 클릭하면 자세한 내용을 볼 수 있다. http://dimsemenov.com/plugins/magnific-popup/documentation.html

사용법은 아래처럼 인클루드하는 파일 즉 css, js 삽입합니다.

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css"> 

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>

사용법은 매우 간단합니다.

해당 엘리먼트에 magnificPopup() 만 붙여주면 되며, 옵션은 아래의 구문처럼 들어가는 형태입니다.

$(document).ready(function() {
  $('.image-link').magnificPopup();
  
  // 아래처럼 옵션이 들어가는 형태입니다.
  $('.image-link2').magnificPopup({
    type:'image'
  });
});

실무에서는 아래의 이미지처럼 html 을 불러오는 형식을 많이 사용합니다.

html을 불러오는 형식은 아래처럼 타입만 지정해주면 되고, 더 자세한 옵션은 홈페이지를 참고하세요

$('.simple-ajax-popup').magnificPopup({
  type: 'ajax'
});