【Wordpress相关】WordPress 教程：在 WordPress 后台使用 ThickBox 制作弹出层

WordPress 教程：在 WordPress 后台使用 ThickBox 制作弹出层,

最近在项目中进行 WordPress 后台开发的时候，需要制作弹出层，经过一轮测试，发现还是 WordPress 原生支持的 ThickBox 比较方便。

WordPress 的 ThickBox jQuery 库

WordPress 后台自带的 ThickBox jQuery 库是经过 WordPress 修改的，比如目前插件更新提示的详情链接就是使用 ThickBox 做的。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

WordPress 后台自带的 ThickBox jQuery 库有两种使用方式：

• iframe 模式：在弹出层中加载另外一个网页。
• inline 模式：在弹出层中加载 HTML 片段

下面分别详细讲讲这两种模式的详细使用方法：

iframe 模式

<?php add_thickbox(); ?>

点击查看<a class="thickbox"  title="如何使用七牛云存储的优惠码" href="/wp-admin/admin.php?page=wpjam-qiniutek-coupon&TB_iframe=true&width=420&height=480" >详细七牛优惠码使用指南</a>

上面的例子就是在 中在设置页面使用的代码，其中：

无论是 iframe 模式还是 inline 模式，首先都要通过 <?php add_thickbox(); ?> 方式加载 ThickBox 库，然后一定要设置 a 标签的 class 的属性为：”thickbox”，不然 ThickBox 不会生效。

a 标签的 href 属性即为 iframe 要加载的页面，TB_iframe 参数指定的是 ThickBox 的 iframe 模式，width 参数指定了弹出层的宽度，height 参数指定了弹出层的高度。

如果还定义了 a 标签的 title 属性，则为弹出层的标题。

inline 模式

<?php add_thickbox(); ?>

<a class="thickbox" title="感谢 Denis" href="#TB_inline?height=220&width=220&inlineId=donate-422">感谢</a>

<div id="donate-422">
你可以通过以下方式捐助该用户。。。

</div>

inline 模式和 iframe 模式很多参数和用法都是相同，最大的区别，它不是一个链接，而是链接的锚点，#TB_inline 指定了 ThickBox 的 inline 模式，inlineId 则指定了弹出层的 HTML 片段来自哪里。