Jquery弹出层插件ThickBox的使用方法

前端技术 2023/09/09 JavaScript

thickbox是jQuery的一个插件，其作用是弹出对话框、网页框，使用户体验度更加愉悦，下面就来简单介绍它的几种用法。
声明一下：这只是个人的总结记载而已。
准备工作：你需要三个文件：thickbox.js、thickbox.css、jquery.js，网上到处可下

具体使用：

第一步：将这三个文件引入到你要使用thickbox的页面

复制代码 代码如下:

<script type=\"text/javascript\" src=\"jquery.js\"></script>
    <script type=\"text/javascript\" src=\"thickbox.js\"></script>
    <link rel=\"stylesheet\" href=\"thickbox.css\" type=\"text/css\" />

第二步：一般简单使用就是给<a>标签和Button添加样式：class=thickbox
还有就是通过thickbox函数调用：如tb_init()、tb_show()；见下文。

几种不同用法：

1.点击显示图片：

 <a href=\"001.jpg\" class=\"thickbox\"><img src=\"001.jpg\"/></a>
ok,就这样搞定
2.点击按钮或链接：

复制代码 代码如下:

<input alt=\"#TB_inline?height=300&width=400&inlineId=div1\" title=\"shawnliu\" class=\"thickbox\" type=\"button\" value=\"Show\" />  
   <a href=\"#TB_inline?height=155&width=300&inlineId=div2&modal=true\" class=\"thickbox\">Show hidden modal content.</a>
  
   <div id=\"div1\" style=\"display:none\">
   <P>
     这是一个非模式对话框。
   </P>
   </div>

   <div id=\"div2\" style=\"display:none\">
   <P>
     这是一个模式对话框。
     <p style=\"TEXT-ALIGN: center\"><INPUT id=\"Login\" onclick=\"tb_remove()\" type=\"submit\" value=\"  Ok  \" /></p>
   </P>
   </div>

本文地址：https://www.stayed.cn/item/24218

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案