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

WordPress 的 ThickBox jQuery 庫(kù)

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

WordPress 后臺(tái)自帶的 ThickBox jQuery 庫(kù)有兩種使用方式：

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

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

iframe 模式

<?php add_thickbox(); ?>

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

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

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

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

如果還定義了 a 標(biāo)簽的 title 屬性，則為彈出層的標(biāo)題。

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ū)別，它不是一個(gè)鏈接，而是鏈接的錨點(diǎn)，#TB_inline 指定了 ThickBox 的 inline 模式，inlineId 則指定了彈出層的 HTML 片段來自哪里。