使用Jquery ThickBox插件的体验(不推荐)

你可以使用官方推荐的插件复制代码如下：虽然厚盒有它的一天，它不再保持，我们建议你使用一些替代品。* color box * jquery ui dialog * fancy box * DOM window * shadow box . js在项目中发现，如果快速点击两次，facebox容易出现黑屏。而facebox的框架是用table写的，可能是因为table在结构上比div更稳定。如果弹出层布局在表格中，样式会受到facebox样式的影响，需要重新设置。看了官方的api，研究了一下，整理了一下。看下图：

附件中index.html是主页，其它页面都是调用页面。点击指数页面，就能看到如图的页面。图、按钮、文字都是可以点的。需要点击的标签都要加上厚盒子。当页面出现滚动条时，弹出层固定在窗口的正中间不会移动。当弹出层中只是图片时，图片大小会根据当前窗口的大小进行压缩。所有的弹出层都可以按esc '退出，除了需要点确认的弹出层外，点击弹出层以外的地方都可以关闭弹出层。 1.展示图片（单张): 复制代码代码如下： a href=' images/single。jpg ' title='在标题属性中添加标题/或留空class=' thick box ' img src=' http : images/single。jpg ' alt=' Plant ' width=' 100 ' height=' 75 '/a 2 .展示图片（多张): 复制代码代码如下图像/工厂1。jpg ' title='向标题属性添加标题/或留空class=' thickbox ' rel=' flowers ' img src=' http : images/Plant 1。jpg ' alt=' Plant 1 '宽度=' 100 '高度=' 75 '/a href=' images/Plant 2。jpg ' title='向标题属性添加标题/或留空class=' thick box ' rel=' flowers ' img src这里每个a都要加上能量损耗率属性，而且属性值要一样。前后展示图可以通过' '和' '来切换3.弹出层内容在当前页面中时：复制代码代码如下：输入alt='#TB_inline？高度=150宽度=400 inline id=myOnPageContent ' title='在标题属性中添加标题/或留空class=' thickbox '值=' Show '类型=' button '将下面的段落和输入放在一个厚盒中，或者输入alt='#TB_inline？高度=155宽度=300 inline id=hiddenModalContentmodal=true ' title='向标题属性添加标题/或留空class=' thickbox ' value=' Show hidden modal content ' type=' button ' div id=' myOnPageContent ' style=' display : none；这是一个很好的例子，也是一个很好的例子.这是一个很小的挑战，因为这是一个很大的挑战/p p select name=' option test/option/select/p/div div id=' hiddenModalContent ' style=' display : none；'这是一个很好的例子，也是一个很好的例子.这是一个很小的挑战，因为这是一个很大的挑战/p p style=' text-align : center；'输入类型='submit' onclick='tb_remove()'值='确定' id='登录'/p/div第一个投入点开的弹出层有投入框、标题和操作按钮以及文字。第二个投入点开的弹出层只有文字。弹出层的大小是根据投入的中高音属性里的宽度和高度值来定义的。下面讲到的几种情况也是这样来定义弹出层大小的。 4.调用外部文件，弹出层是内联框架复制代码代码如下： a href='ajaxFrame .PHP？保持这个=TrueTB _ iframe=TrueHeight=250 width=400 ' title='向标题属性添加标题/或留空class='thickbox '示例1/a a href='ajaxOverFlow2.html？保持这个=TrueTB _ iframe=TrueHeight=300 width=500 ' title='向标题属性添加标题/或留空class='thickbox '示例2/a a href=' IFrame MoDEL . html？place values before b _=savedvalueestb _ iFrame=true高度=200宽度=300 Modal=true ' title='向标题属性添加标题/或留空class='thickbox '打开iFrame Modal/a如果弹出层是嵌套在内联框架里需要添加“TB_iframe=true”。第一个是调用ajaxFrame .服务器端编程语言(专业超文本预处理器的缩写)文件。

第二个是调用ajaxOverFlow2.html文件。第三个是调用了iframeModal.html文件，隐藏了标题和操作按钮。 5.调用外部文件，弹出层不是内联框架复制代码代码如下： a href='ajaxOverFlow.html？高度=300宽度=400 '标题='向标题属性添加标题/或留空class='thickbox '滚动内容/a a href='ajax .PHP？高度=220宽度=400 ' class=' thickbox ' title='给标题属性添加标题/或留空'无滚动内容/a a href='ajaxLogin.html？高度=85宽度=250模态=真' class=' thickbox ' title='请登录登录(模式)/a a href=' AjaxtBcontent。html？高度=200宽度=300' class='thickbox' title='更新厚盒内容/a第一个调用ajaxOverFlow.html文件。第二个调用阿贾克斯。服务器端编程语言(专业超文本预处理器的缩写)文件。第三个调用ajaxLogin.html文件，形式表单。第四个调用ajaxTBcontent.html文件，弹出层里再调用newTBcontent.html文件。