官网地址:http://jquery.com/demo/thickbox/
用法就是如下了:
<html>
<head>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>
<body>
<a
href="images/single.jpg" title="add a caption to title attribute / or
leave blank" class="thickbox"><img src="images/single_t.jpg"
alt="Single Image"/></a>
<a
href="images/plant1.jpg" title="add a caption to title attribute / or
leave blank" class="thickbox" rel="gallery-plants"><img
src="images/plant1_t.jpg" alt="Plant 1" /></a>
<a
href="images/plant2.jpg" title="add a caption to title attribute / or
leave blank" class="thickbox" rel="gallery-plants"><img
src="images/plant2_t.jpg" alt="Plant 2" /></a>
<a
href="images/plant3.jpg" title="add a caption to title attribute / or
leave blank" class="thickbox" rel="gallery-plants"><img
src="images/plant3_t.jpg" alt="Plant 3" /></a>
<a
href="images/plant4.jpg" title="add a caption to title attribute / or
leave blank" class="thickbox" rel="gallery-plants"><img
src="images/plant4_t.jpg" alt="Plant 4" /></a>
<input
alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent&modal=true"
title="add a caption to title attribute / or leave blank"
class="thickbox" type="button" value="Show" />
<a
href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true"
class="thickbox">Show hidden modal content.</a>
<a href="ajax.PHP?keepThis=true&TB_iframe=true&height=250&width=400"
title="add a caption to title attribute / or leave blank"
class="thickbox">Example 1</a>
<a href="ajaxOverFlow.htm?keepThis=true&TB_iframe=true&height=300&width=500" title="add a caption to title attribute / or leave blank" class="thickbox">Example 2</a>
<a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox">Open iFrame Modal</a>
以上加红色字的表示是特殊参数,比如:不显示关闭,窗口大小等
AJAX Content
Demo
Demo html
Description:
<a
href="ajaxOverFlow.html?height=300&width=300" title="add a caption
to title attribute / or leave blank" class="thickbox">Scrolling
content</a>
<a href="ajax.PHP?height=220&width=400"
class="thickbox" title="add a caption to title attribute / or leave
blank">No-scroll content</a>
<a href="ajax.PHP?height=220&width=400" class="thickbox" title="Please Sign In">login (modal)</a>
<a href="ajaxTBcontent.html?height=200&width=300" class="thickbox" title="">Update ThickBox content</a>
</body>
</html>
下载地址:
Download thickbox.js or thickbox-compressed.js, ThickBox.css, and the loading graphic (loadingAnimation.gif) to your local machine (or cut and paste the code from the tabs). Along with these three files, a copy of the jQuery JavaScript library is needed. For this site, and ThickBox, I am using the compressed version of jQuery.
留下你的看法: