ページ内のコンテンツを表示する

書式

<a href="#TB_inline?height=H&width=W&inlineId=id" rel="thickbox" title="titleString">〜</a>

H : 縦幅【省略可能】
W : 横幅【省略可能】
id : 表示するコンテンツのID
titleString : タイトル文字

説明

ページ内のコンテンツを表示するには<a>タグのhref属性に表示するHTMLタグのIDや幅を指定します。幅はピクセル値で指定します。幅を省略した場合は親エレメントに応じて自動的に処理されます。また、ThickBoxを使用する際には付属のthickbox.cssが必要になります。

Ajaxライブラリ リファレンス

サンプルコード [実行]

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="all">
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
</head>
<body>
<h1>ThickBoxサンプル</h1>
<a href="#TB_inline?height=300&width=300&inlineId=about" class="thickbox" title="ThickBoxとは?">ThickBoxについて</a>
<div id="about">
ページ内にあるコンテンツを画面中央ボックス上に表示させることもできます。
ThickBoxを使用するにはjQueryライブラリが必要です。<br>
</div>
</body>
</html>