jquery.colorbox.js:別(リンク先)ページをlightbox風に表示するJs



別(リンク先)ページをライトボックス(lightbox)風に表示してみます。
過去に
THICKBOX:LIGHTBOX風な表示のカスタマイズし易いJS
を紹介しましたが似た様な表示イメージです。

1.読込むCSSファイルとCSSの記述例

<style type="text/css" media="all">
<!--
p{
	text-align:center;
	line-height:1.2em;
}
a{
	text-decoration:underline;
	color:#000000;
	font-weight:bold;
}
a:hover{
	text-decoration:underline;
	color:#CCCCCC;
}
-->
</style>
<link rel="stylesheet" href="colorbox.css" />

2.読込むJsファイルとJavaScriptの記述例

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
	$(".clBox").colorbox({iframe:true, width:"90%", height:"90%"});
});
</script>

3.HTMLの記述例

	<p><a class="clBox" href="/" title="BLINDER HIDDEN: WEBエンジニアの隠れたファインプレー">ココをクリック</a></p>

jquery.colorbox.js:別ページをlightbox風に表示するデモページ

JavaScriptでレイヤーを被せて被せたレイヤー上に
iframeで別ページを表示させてるイメージだと思います。

個人的に「iframe」(あと「table」も)って単語に
若干の拒絶反応があります。