最近在專案中進行 WordPress 後臺開發的時候，需要製作彈出層，經過一輪測試，發現還是 WordPress 原生支援的 ThickBox 比較方便。

WordPress 的 ThickBox jQuery 庫

WordPress 後臺自帶的 ThickBox jQuery 庫是經過 WordPress 修改的，比如目前外掛更新提示的詳情連結就是使用 ThickBox 做的。

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" style="display:none;">
	<p>你可以通過以下方式捐助該使用者。。。</p>
</div>

inline 模式和 iframe 模式很多引數和用法都是相同，最大的區別，它不是一個連結，而是連結的錨點，#TB_inline 指定了 ThickBox 的 inline 模式，inlineId 則指定了彈出層的 HTML 片段來自哪裡。