【Magnific Popup】画像、動画、HTMLなんでもポップアップしてくれるモーダル系jQueryプラグインの使い方

<link href="css/magnific-popup.css" rel="stylesheet" type="text/css">
<script src="js/jquery.magnific-popup.js"></script>

<script type="text/javascript">
	$(function () {
		$('.popup-modal').magnificPopup({
			type: 'inline', //image,inline,iframe（YouTube・Googleマップ）,ajax（HTMLポップアップ） 
			mainClass: 'mfp-fade', //アニメーションのクラスを設定する
			removalDelay: 600, //ポップアップを閉じる際のフェードアウト時間
			preloader: true, //リンク切れの際のエラー表示
			disableOn: 700, //700px以下でリンクにする
			fixedContentPos: false //trueはポップアップがposition:fixedに、falseはposition:absoluteに
		});
	});
</script>

<div class="wrap_content case_img popup-gallery">
	<a class="btn" href="img/magnific_img01.jpg" title="Title img01">img01</a>
	<a class="btn" href="img/magnific_img02.jpg" title="Title img02">img02</a>
	<a class="btn" href="img/magnific_img03.jpg" title="Title img03">img03</a>
</div><!-- wrap_content -->

<script type="text/javascript">
$(document).ready(function() {
	$('.popup-gallery').magnificPopup({
		delegate: 'a',
		type: 'image',
		tLoading: 'Loading image #%curr%...',
		mainClass: 'mfp-fade',
		removalDelay: 600,
		gallery: {
			enabled: true,
			navigateByImgClick: true,
			preload: [0,1] // Will preload 0 - before current, and 1 after the current image
		},
		image: {
			tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
			titleSrc: function(item) {
				return item.el.attr('title') + '<small>by UHAHA</small>';
			}
		}
	});
});
</script>

<a class="btn popup-modal" href="#modal_test">inline</a>
<div id="modal_test" class="mfp-hide white-popup-block">
	<h1>Modal test</h1>
	<p>インラインテキストテスト</p>
	<p><a class="popup-modal-dismiss btn" href="#">CLOSE</a></p>
</div>

<script type="text/javascript">
	$(function () {
		$('.popup-modal').magnificPopup({
			type: 'inline',
			mainClass: 'mfp-fade',
			removalDelay: 600
		});
		$(document).on('click', '.popup-modal-dismiss', function (e) {
			e.preventDefault();
			$.magnificPopup.close();
		});
	});
</script>

<a class="btn popup-youtube" href="https://www.youtube.com/watch?v=w2iPKMP2a-U">YouTube</a>
<a class="btn popup-gmaps" href="https://maps.google.co.jp/maps?q=loc:35.649679,139.720945&iwloc=A">Googleマップ</a>

<script type="text/javascript">
$(document).ready(function() {
	$('.popup-youtube, .popup-gmaps').magnificPopup({
		disableOn: 480,//700pxでポップアップせずYouTubeへリンクする
		type: 'iframe',
		mainClass: 'mfp-fade',
		removalDelay: 160,
		preloader: false,
		fixedContentPos: false
	});
});
</script>

<a class="btn simple-ajax-popup" href="ajax_sample.html">ajax</a>

<script type="text/javascript">
$(document).ready(function() {
	$('.simple-ajax-popup').magnificPopup({
		type: 'ajax'
	});
});
</script>

<script type="text/javascript">
	$(function () {
		$('.popup-modal').magnificPopup({
			type: 'inline',
		　mainClass: 'mfp-fade',
　　　removalDelay: 600
		});
	});
</script>

.mfp-fade.mfp-bg{
	opacity: 0;
	transition: all 0.3s 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;
	transition: all 0.3s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content{
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content{
	opacity: 0;
}