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

<link href="css/modaal.css" rel="stylesheet" type="text/css">
<script src="js/modaal.js"></script>

$('.gallery').modaal({
  type: 'image', //video iframe ajax confirm instagram inline
	fullscreen: true, //フルスクリーンモード
	animation_speed:800 //アニメーション速度
});

<a class="btn gallery" data-group="gallery" href="img/magnific_img01.jpg" title="Title img01">img01</a>
<a class="btn gallery" data-group="gallery" href="img/magnific_img02.jpg" title="Title img02">img02</a>
<a class="btn gallery" data-group="gallery" href="img/magnific_img03.jpg" title="Title img03">img03</a>

<script type="text/javascript">
	$('.gallery').modaal({
	    type: 'image'
	});
</script>

<a class="btn inline" href="#inline">inline</a>
<div id="inline" style="display:none;" class="white-popup-block">
	<h1>Modaal</h1>
	<p>インラインテキストテスト</p>
</div>

<script type="text/javascript">
	$(".inline").modaal();
</script>

<script type="text/javascript">
	$(".inline").modaal({
	fullscreen: true
	});
</script>

<a class="btn video" href="https://www.youtube.com/embed/w2iPKMP2a-U">YouTube</a>
<a class="btn video" href="https://player.vimeo.com/video/193641463">vimeo</a>

<script type="text/javascript">
$('.video').modaal({
	type: 'video'
});
</script>

<a class="btn iframe" href="sample.html">uhaha.net</a>
<a class="btn iframe" href="map.html">map</a>

<script type="text/javascript">
$('.iframe').modaal({
	type: 'iframe',
	width: 700,
	height: 500
});
</script>

<a class="btn modaal-ajax" href="sample.html">ajax</a>
<a class="btn modaal-ajax" href="map.html">map</a>

<script type="text/javascript">
$('.modaal-ajax').modaal({
    type: 'ajax'
});
</script>