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

lightbox（ライトボックス）って良く使われてますが、lightboxのイメージで別URLのページを表示してみます。

colorboxで表示させるためのCSSとJsファイルを読み込み、colorboxを使用するJavaScript記述

※colorbox.cssと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>

colorboxで表示させるための別URLページを指定したHTMLの記述

※以下のaタグを記述するだけです、

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

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

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

ソース元

Colorbox – a jQuery lightbox

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

冒頭でも言いましたがライトボックス風に表示して下さいって感じのアレです。

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