WordPress 果酱
·
从 Thickbox 到原生
💡
原文中文，约4900字，阅读约需12分钟。
📝
内容提要
WPJAM Basic 已升级为原生 HTML <dialog> 弹窗，取代了 Thickbox。新弹窗简洁、无依赖、兼容性强，支持自定义样式和内容，使用方便。通过 wpjam.dialog() 方法可轻松创建和管理弹窗，解决了媒体库遮挡问题，提升了 WordPress 后台开发效率。
🎯
关键要点
- WPJAM Basic 已升级为原生 HTML <dialog> 弹窗，取代了 Thickbox。
- 新弹窗简洁、无依赖、兼容性强，支持自定义样式和内容。
- 通过 wpjam.dialog() 方法可轻松创建和管理弹窗。
- 解决了媒体库遮挡问题，提升了 WordPress 后台开发效率。
- 原生 <dialog> 标签兼容主流现代浏览器，适配性强。
- WPJAM Basic 封装的 dialog 方法简化了弹窗的使用和事件监控。
- 使用临时关闭和事后恢复的方法解决了弹窗层级遮挡问题。
❓
延伸问答
WPJAM Basic 为什么要从 Thickbox 切换到原生 Dialog？
WPJAM Basic 切换到原生 Dialog 是因为 Thickbox 依赖老旧的 JS 库，维护停滞且适配现代布局麻烦，而原生 Dialog 更简洁、无依赖且兼容性强。
原生 HTML <dialog> 弹窗有哪些优势？
原生 HTML <dialog> 弹窗简洁、无依赖、兼容主流现代浏览器，支持自定义样式和内容，使用方便，提升了开发效率。
如何使用 wpjam.dialog() 方法创建弹窗？
可以通过调用 wpjam.dialog() 方法，传入配置参数来创建弹窗，例如设置标题和内容，代码示例为 wpjam.dialog({ page_title: '弹窗标题', data: '这里是弹窗内容' });
WPJAM Basic 如何解决媒体库遮挡问题？
WPJAM Basic 通过临时关闭当前 Dialog，打开媒体选择弹窗后再重新显示 Dialog，解决了层级遮挡问题。
WPJAM Basic 的弹窗使用是否需要额外的 JS 库？
不需要，WPJAM Basic 的原生 Dialog 弹窗是无依赖的，使用原生 HTML 标签即可实现。
WPJAM Basic 的弹窗如何自定义样式？
可以通过 CSS 自由添加样式，自定义标题栏、关闭按钮和内容区域，以适配 WPJAM Basic 的后台设计风格。
➡️
