jquery.colorbox.jsを使用してlightbox風に別URLページを表示

lightbox（ライトボックス）って良く使われてますが、今回はjquery.colorbox.jsを使用してlightbox風に別URLページを表示する方法をご紹介します。

jquery.colorbox.jsを使用してlightbox風に別URLページを表示するJavaScript記述

※colorbox.css、jquery.min.js、jquery.colorbox.jsファイルを読み込みます。colorboxで表示させるタグ要素（.iframe）とサイズを指定します。

 	<link rel="stylesheet" href="colorbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.colorbox.js"></script>
<script><br />
$(document).ready(function(){<br />
	$(".iframe").colorbox({iframe:true, width:"90%", height:"90%"});<br />
});
</script>

lightbox風に別URLページを表示するHTMLの記述

※以下のaタグを記述するだけです。aタグにcolorboxで表示させるタグ要素class=”iframe”を記述します。

<a class="iframe" href="https://dad-union.com">このリンクをクリック</a>

jquery.colorbox.jsでightbox風に別ページ（iframe）を表示するデモページ

jquery.colorbox.jsでightbox風に別ページ（iframe）を表示

ソース元：Colorbox – a jQuery lightbox

Colorbox – a jQuery lightbox

その他、画像や動画（YouTube等）の表示も出来る様です。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。