知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    基于jQuery弹出层插件thickbox

    作者:佳明妈 来源:未知 2010-11-04 人气:
    基于jQuery弹出层插件thickbox,这是thickbox3.1版,需要jQuery支持,可以使用jquery-1.4.3.min.js这个文件比较新比较小。

    基于jQuery弹出层插件thickbox,这是thickbox3.1版,需要jQuery支持,可以使用jquery-1.4.3.min.js这个文件比较新比较小。
    随着时间的推移,jquery已经更新了很多个版本了,请选择合适的jquery版本使用

    thickbox3.1参数中文说明:

    class="thickbox" 调用thickbox
    height 打开窗口的高度;
    width 打开窗口的宽度;
    title="Iframe(Auto Hide)" 弹窗的标题(title)
    keepThis=true TB_iframe=true 这两个参数调用iframe页面时必须的
    #TB_inline 调用当前页面上隐藏的层;
    inlineId 当前页面隐藏的层的ID;
    modal=true 显示或禁用title
    

    1、调用iframe框架,固定宽度和高度,超出显示滚动条(auto hide):

    <a href="http://www.51xuediannao.com?keepThis=true&TB_iframe=true&height=400&width=600" class="thickbox">
    调用iframe,固定宽度和高度,超出显示滚动条
    </a>
     

    2、打开页面,固定宽度和高度,无滚动条,禁用title, fixed width, fixed height

    <a href="thickbox.html?keepThis=true&TB_iframe=true&height=100&width=220&modal=true" class="thickbox">
    modal=true表示禁用title,去掉即可显示title及可自动关闭
    </a>
     

    3、thickbox点击链接显示隐藏的层,隐藏在页面中已经存在

    <a href="#TB_inline?height=200&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">thickbox链接显示隐藏的层,隐藏在页面中已经存在</a>
    隐藏的层如下,注意id和链接中的id对应,注意层中的代码  onclick="tb_remove()" 可以移除当前层
    <div id="hiddenModalContent" style="display:none">
    <p>thickbox链接显示隐藏的层</p>
    <p style="text-align:center"><input type="submit" value="按钮" onclick="tb_remove()"/></p>
    </div>
     

    4、点击按钮显示隐藏的层,隐藏在页面中已经存在

    <input alt="#TB_inline?height=150&width=400&inlineId=myOnPageContent " title="点击按钮显示隐藏的层,隐藏在页面中已经存在" class="thickbox" type="button" value="show" />
     
    <div id="myOnPageContent" style="display:none">
    <p>点击按钮显示隐藏的层这是隐藏的层</p>
    </div>
     

    5、thickbox3.1的ajax载入,自动宽度和高度,禁用title

    <a href="thickbox.html?height=350&width=350&modal=true" class="thickbox">
    thickbox3.1的ajax载入,页面无法查看源代码
    </a>
     

    6、thickbox调用单张图片

    <a href="images/plant1.jpg" title="plant" class="thickbox"><img src="images/plant1_t.jpg" alt="thickbox调用单张图片" /></a>
     

    7、多张图片调用

    <a href="images/plant1.jpg" title="plant1" class="thickbox" rel="gallery-plants"><img src="images/plant1_t.jpg" alt="多张图片调用第一张1" /></a>
    <a href="images/plant2.jpg" title="plant2" class="thickbox" rel="gallery-plants"><img src="images/plant2_t.jpg" alt="2" /></a>
    <a href="images/plant3.jpg" title="plant3" class="thickbox" rel="gallery-plants"><img src="images/plant3_t.jpg" alt="多张图片调用第一张3" /></a>
    ↓ 查看全文

    基于jQuery弹出层插件thickbox由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    基于jQuery弹出层插件thickbox-最新评论

    • Blake 广东省深圳市 2017-05-05 01:00:07
      挺不错的
    • 11 2015-10-27 02:10:45
      [怒吼]
    • 松井玲奈 2015-10-27 02:06:45
      [怒吼]
    • 西班牙超模 2015-10-09 06:29:06
      [6]