最近在項目中進行 WordPress 后臺開發(fā)的時候，需要制作彈出層，經(jīng)過一輪測試，發(fā)現(xiàn)還是 WordPress 原生支持的 ThickBox 比較方便。

WordPress 的 ThickBox jQuery 庫

WordPress 后臺自帶的 ThickBox jQuery 庫是經(jīng)過 WordPress 修改的，比如目前插件更新提示的詳情鏈接就是使用 ThickBox 做的。

WordPress 后臺自帶的 ThickBox jQuery 庫有兩種使用方式：

• iframe 模式：在彈出層中加載另外一個網(wǎng)頁。
• inline 模式：在彈出層中加載 HTML 片段

下面分別詳細講講這兩種模式的詳細使用方法：

iframe 模式

<?php add_thickbox(); ?>

點擊查看<a class="thickbox"  title="如何使用七牛云存儲的優(yōu)惠碼" href="/wp-admin/admin.php?page=wpjam-qiniutek-coupon&TB_iframe=true&width=420&height=480" >詳細七牛優(yōu)惠碼使用指南</a>

上面的例子就是在 七牛鏡像存儲 WordPress 插件中在設置頁面使用的代碼，其中：

無論是 iframe 模式還是 inline 模式，首先都要通過 <?php add_thickbox(); ?> 方式加載 ThickBox 庫，然后一定要設置 a 標簽的 class 的屬性為：”thickbox”，不然 ThickBox 不會生效。

a 標簽的 href 屬性即為 iframe 要加載的頁面，TB_iframe 參數(shù)指定的是 ThickBox 的 iframe 模式，width 參數(shù)指定了彈出層的寬度，height 參數(shù)指定了彈出層的高度。

如果還定義了 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" style="display:none;">
	<p>你可以通過以下方式捐助該用戶。。。</p>
</div>

inline 模式和 iframe 模式很多參數(shù)和用法都是相同，最大的區(qū)別，它不是一個鏈接，而是鏈接的錨點，#TB_inline 指定了 ThickBox 的 inline 模式，inlineId 則指定了彈出層的 HTML 片段來自哪里。