WordPress 教程:在 WordPress 后台使用 ThickBox 制作弹出窗
2023-06-13 09:18:31 时间
最近在项目中进行 WordPress 后台开发的时候,需要制作弹出层,经过一轮测试,发现还是 WordPress 原生已支持的 ThickBox 比较方便。
WordPress 的 ThickBox jQuery 库
WordPress 后台自带的 ThickBox 库是经过 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="感谢" href="#TB_inline?height=220&width=220&inlineId=donate-422">感谢</a>
<div id="donate-422" style="display: none;">
你可以通过以下方式捐助该用户。。。
</div>
inline 模式和 iframe 模式很多参数和用法都是相同,最大的区别,它不是一个链接,而是链接的锚点,#TB_inline 指定了 ThickBox 的 inline 模式,inlineId 则指定了弹出层的 HTML 片段来自哪里。
相关文章
- 『原创』『教程』给兰空图床添加一个后台获取Tonken功能
- Vue3.0商店后台管理系统项目实战-路由守卫(登录状态储存)
- Vue3.0商店后台管理系统项目实战-模板语法
- 尚医通-后台系统
- springboot整合druid数据源并开启druid后台监控
- 【渗透测试】轻松拿下一个裸聊后台
- WordPress 教程:使后台菜单图标兼容 WordPress 新的扁平化后台风格
- 在HANA里设置后台Job详解编程语言
- 利用Redis提升后台运行效率(redis后台运行)
- Google 将限制 Android 应用在后台访问地理位置数据
- Linux停止后台进程的命令指南(linux结束后台进程命令)
- 利用Oracle实现Nohup后台运行的管理(oracle nohup)
- c#异步操作后台运行(backgroundworker类)示例
- node.js适合游戏后台开发吗?