インナーコンテンツ
ThickBox内に下記の赤枠で囲まれている要素の内容を表示します。
参照:Thickbox 3.1
ThickBox内に下記の赤枠で囲まれている要素の内容を表示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" ></script> <script type="text/javascript" src="/content/lib/thickbox3/thickbox.js"></script> <link rel="stylesheet" href="/content/lib/global.css" type="text/css" /> <link rel="stylesheet" href="/content/lib/thickbox3/thickbox.css" type="text/css" /> <style type="text/css"> div.gallery { margin:1em 0; padding:0; } div.gallery ul { margin:0; padding:0; list-style:none; overflow:hidden; } div.gallery li { margin:0 0 1em 10px; padding:0; display:block; float:left; width:160px; text-align:center; background-color:#eee; border:1px solid #ccc; } div.gallery p { margin:0 0 5px 0; padding:0; } div.gallery div.title { margin:0 0 10px 0; padding:2px 5px; background-color:#ccc; color:#fff; font-weight:bold; } div.gallery div.image { margin:10px auto; padding:0; width:140px; height:120px; overflow:hidden; } .hide { display:none; } </style> <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <div id="wrap"> <h1>設置サンプル</h1> <p>参照:<a href="http://jquery.com/demo/thickbox/">Thickbox 3.1</a></p> <div id="content"> <h2>インナーコンテンツ</h2> <p><input alt="#TB_inline?height=100&width=400&inlineId=myOnPageContent" title="タイトル部分" class="thickbox" type="button" value="表示" /> ThickBox内に下記の赤枠で囲まれている要素の内容を表示します。</p> <div id="myOnPageContent" style="border:1px solid red; padding:10px;"> <div><a href="http://www.flickr.com/photos/22559849@N06/2974008614/" title="くまさんケーキ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_s.jpg" width="75" height="75" alt="くまさんケーキ" align="left" style="border:3px solid #000; margin:0 10px 5px 0;" /></a> むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。新宿アルタの地下で見かけて思わず激写!どこから食べようか考えちゃうよね。とりあえず耳からいっておきますかw <br clear="all" /> </div> </div> <p><a href="#TB_inline?height=200&width=360&inlineId=hiddenModalContent&modal=true" class="thickbox">モーダルコンテンツを表示.</a></p> <div id="hiddenModalContent" style="display:none;"> <div style="text-align:center;margin:0 auto;"> <a href="http://www.flickr.com/photos/22559849@N06/2974008614/" title="くまさんケーキ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3222/2974008614_f4b59bf651_o.png" width="320" height="240" alt="くまさんケーキ" /></a> <p>むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。<br>新宿アルタの地下で見かけて思わず激写!<br>どこから食べようか考えちゃうよね。<br>とりあえず耳からいっておきますかw</p> <input type="submit" id="Login" value=" 閉じる " onclick="tb_remove()" /> </div> </div> <h2>インラインフレームコンテンツ</h2> <ul> <li><a href="index.php?keepThis=true&TB_iframe=true&height=400&width=600" title="PHP & JavaScript Room" class="thickbox">index.phpを表示</a></li> <li><a href="http://www.google.co.jp?keepThis=true&TB_iframe=true&height=400&width=600" title="Google" class="thickbox">Googleを表示</a></li> <li><a href="/content/libthickbox3/iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="HTMLコンテンツをインラインフレーム表示" class="thickbox">Open iFrame Modal</a></li> </ul> <h2>シングルイメージ</h2> <p> <a href="/content/libgalleryimages/image.jpg" title="クリスマスパーティー" class="thickbox"><img src="/content/libgalleryimages/thumb/image.jpg" alt="Image" /></a> </p> <h2>ギャラリーイメージ</h2> <div class="gallery"> <ul> <!-- Achievement [start] --> <li> <div class="cf"> <div class="title">Achievement</div> <p> <a href="/content/libgalleryimages/achievement-1.jpg" title="Achievement #1" class="thickbox" rel="achievement"><img src="/content/libgalleryimages/thumb/achievement.jpg" width="140" height="120" alt="Achievement" /></a> <a href="/content/libgalleryimages/achievement-2.jpg" title="Achievement #2" class="thickbox hide" rel="achievement">#2</a> </p> </div> </li> <!-- Achievement [end] // --> <!-- Imagenation [start] --> <li> <div class="cf"> <div class="title">Imagination</div> <p> <a href="/content/libgalleryimages/imagination-1.jpg" title="Imagination #1" class="thickbox" rel="imagination"><img src="/content/libgalleryimages/thumb/imagination.jpg" width="140" height="120" alt="Imagination" /></a> <a href="/content/libgalleryimages/imagination-2.jpg" title="Imagination #2" class="thickbox hide" rel="imagination">#2</a> <a href="/content/libgalleryimages/imagination-3.jpg" title="Imagination #3" class="thickbox hide" rel="imagination">#3</a> <a href="/content/libgalleryimages/imagination-4.jpg" title="Imagination #4" class="thickbox hide" rel="imagination">#4</a> </p> </div> </li> <!-- Imagination [end] // --> <!-- Christmas Party [start] --> <li> <div class="cf"> <div class="title">Christmas Party</div> <p> <a href="/content/libgalleryimages/christmas-party-1.jpg" title="Christmas Party #1" class="thickbox" rel="christmas-party"><img src="/content/libgalleryimages/thumb/christmas-party.jpg" width="140" height="120" alt="Christmas Party" /></a> <a href="/content/libgalleryimages/christmas-party-2.jpg" title="Christmas Party #2" class="thickbox hide" rel="christmas-party">#2</a> <a href="/content/libgalleryimages/christmas-party-3.jpg" title="Christmas Party #3" class="thickbox hide" rel="christmas-party">#3</a> <a href="/content/libgalleryimages/christmas-party-4.jpg" title="Christmas Party #4" class="thickbox hide" rel="christmas-party">#4</a> <a href="/content/libgalleryimages/christmas-party-5.jpg" title="Christmas Party #5" class="thickbox hide" rel="christmas-party">#5</a> <a href="/content/libgalleryimages/christmas-party-6.jpg" title="Christmas Party #6" class="thickbox hide" rel="christmas-party">#6</a> <a href="/content/libgalleryimages/christmas-party-7.jpg" title="Christmas Party #7" class="thickbox hide" rel="christmas-party">#7</a> <a href="/content/libgalleryimages/christmas-party-8.jpg" title="Christmas Party #8" class="thickbox hide" rel="christmas-party">#8</a> <a href="/content/libgalleryimages/christmas-party-9.jpg" title="Christmas Party #9" class="thickbox hide" rel="christmas-party">#9</a> </p> </div> </li> <!-- Christmas Party [end] // --> <!-- Technology [start] --> <li> <div class="cf"> <div class="title">Technology</div> <p> <a href="/content/libgalleryimages/technology-1.jpg" title="Technology #1" class="thickbox" rel="technology"><img src="/content/libgalleryimages/thumb/technology.jpg" width="140" height="120" alt="Technology" /></a> <a href="/content/libgalleryimages/technology-2.jpg" title="Technology #2" class="thickbox hide" rel="technology">#2</a> <a href="/content/libgalleryimages/technology-3.jpg" title="Technology #3" class="thickbox hide" rel="technology">#3</a> </p> </div> </li> <!-- Technology [end] // --> </ul> </div><!-- div#wrap/div#content/div.gallery --> <p>写真素材:<a href="http://www.nwyhstockimages.com/">NWYH Stock Image Library</a></p> </div><!-- div#wrap/div#content --> </div><!-- div#wrap --> </body> </html>