利用WordPress后台ThickBox创建弹窗

最近在我们自用插件上开发了一个 WordPress 集成 Unsplash 和 Pexels 免费图库的功能,方便直接搜索免费图片和直接下载插入 WordPress 图库和文章,所有就需要在 WordPress 后台创建弹窗,这样操作似乎才满意。

利用WordPress后台ThickBox创建弹窗,WordPress Popup 弹窗,分享,Windows,建站,教程,技术,图文教程,代码,WordPress,优化,美化,第1张

本来一开始就想用 WordPress 本身的媒体库 wp.media 来创建,发现我自己搞不定兼容原有图库,后来查询到 WordPress 已经支持的 ThickBox 就非常完美,能够自定义的创建 WordPress 后台弹窗,所有子凡就简单的来分享一下 WordPress ThickBox 创建弹窗。

利用WordPress后台ThickBox创建弹窗,Fanly Basic Imgs,分享,Windows,建站,教程,技术,图文教程,代码,WordPress,优化,美化,第2张

WordPress 本身自带的 ThickBox 也是使用的 jQuery 库,似乎也经过 WordPress 本身的修改和兼容,整体来说对 WordPress 已经足够了,同时 ThickBox 本身支持两种方式。

TB_iframe 方式

在弹出的窗口中加载另外一个网页,也就是 iframe 框架方式载入另一个页面。

<?php add_thickbox(); ?>  <a href="https://zhangzifan.com?TB_iframe=true&width=600&height=550" title="弹窗标题">查看泪雪博客</a>

TB_inline 方式

在弹出的窗口中载入 HTML 片段,也就是显示部分自定义的 HTML 内容。

<?php add_thickbox(); ?>  <div id="fanly-custom-id" style="display:none;">       <p>哈哈哈,这是我的自定义内容,这都被你看见了。这是我的隐藏内容!单击链接时,它将出现在 ThickBox 中。</p>  </div>  <a href="#TB_inline?&width=600&height=550&inlineId=fanly-custom-id" title="弹窗标题">查看我的自定义内容</a>

值得注意的是,使用 ThickBox 的内联内容功能(TB_inline)时,内容必须嵌套在内联容器内的另一个元素中。

相关文章

您需要 登录账户 后才能发表评论

发表评论 取消回复

电子邮件地址不会被公开。 必填项已用*标注