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

ライトボックスって単語を良く耳にしますが、そんな雰囲気で別URLの指定別ページを表示してみます。

1．読み込むCSS、JsファイルとJavaScriptの記述例

 	<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>

2．HTMLの記述例

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

↑だけです。

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

ソース元：Colorbox – a jQuery lightbox

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

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

※流用される場合は自己責任でお願いします。