jQuery扩展类库thickbox实现弹出层

1>?引用JQuery插件、thickbox插件;

<script?type="text/javascript"?src="path-to-file/jquery.js"></script>?
<script?type="text/javascript"?src="path-to-file/thickbox.js"></script>

2>?引入thickbox的css文件;

<link?rel="stylesheet"?href="path-to-file/thickbox.css"?type="text/css"?media="screen"?/>

3>?对需要使用?thickbox效果的对象加入以下代码, 给创建的这个link元素一个class="thickbox"属性;

 <a?href="Upimg/single.jpg"?title="add?a?caption?to?title?attribute?"?class="thickbox">
??????对象/图片
?</a>

一、一张图片

<1>给创建的这个link元素一个??class="thickbox"??属性
调用代码如下:

<a?href=”Upimg/single.jpg”?title=”add?a?caption?to?title?attribute?”?class=”thickbox”>

 

 

 

<img?src=”Upimg/single_t.jpg”?alt=”Image?2″/>
</a>

二、多张图片

 <1>给创建的这个link元素一个??class="thickbox"??属性
<2>给每一个link元素一个相同的rel值。(比如:rel="gallery-plants")


<a?href="Upimg/plant1.jpg"?title="add?a?caption?"?class="thickbox"?rel="gallery-plants">
?<img?src="Upimg/plant1_t.jpg"?alt="Plant?1"?/>
</a>?

<a?href="Upimg/plant2.jpg"?title="add?a?caption"?class="thickbox"?rel="gallery-plants">
??????<img?src="Upimg/plant2_t.jpg"?alt="Plant?2"?/>
</a>?

<a?href="Upimg/plant3.jpg"?title="add?a"?class="thickbox"?rel="gallery-plants">
??????<img?src="Upimg/plant3_t.jpg"?alt="Plant?3"?/>
</a>?

三、?层

 <1>给创建的这个link元素一个??class="thickbox"??属性
<2>给link元素的href属性设置为:?#TB_inline
<3>在href属性的值#TB_inlineIn后面追加一下字符:??height=300&width=300&inlineId=myOnPageContent
????当然你也可以在参数字符串中加?modal=true(比如.?#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true)?这样当关闭ThickBox时会调用ThickBox内部的一个tb_remove()函数。在演示中查看“显示隐藏模式的内容”则要求点击yes?或?no才能关闭ThickBox。

??代码如下:

<input?alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent"?title="add?a?caption"?class="thickbox"?type="button"?value="Show"?/>?

<div?id="myOnPageContent">
?<p>Lorem?ipsum?dolor?sit?amet,?consectetuer?adipiscing?elit,?sed?diam?nonummy?nibh?euismod?tincidunt?ut?laoreet?dolore?magna?aliquam?erat?volutpat.?Ut?wisi?enim?ad?minim?veniam,?quis?nostrud?exerci?tation?ullamcorper?suscipit?lobortis?nisl?ut?aliquip?ex?ea?commodo?consequat.</p>
?<p><select?name=""><option>测试</option></select></p>
</div>

四、iframe

<1>给创建的这个link元素一个??class="thickbox"??属性?
<2>?
href属性的URL后面追加上以下字符参数:??KeepThis=true&TB_iframe=true&height=400&width=600
代码如下:

<a?href="Upimg/ajax_ifram.html?keepThis=true&TB_iframe=true&height=250&width=400"?title="add?a?caption?to?title?attribute?/?or?leave?blank"?class="thickbox">
????例子1
</a>?

参考:http://blog.sina.com.cn/s/blog_64d8a1d00100i7r5.html

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据