如何在使用 GenerateBlocks 编辑器插件的 WordPress 网站中添加模态框弹窗

模态框弹窗（Modal）是一种常见的网页设计元素，可以在不离开当前页面的情况下展示重要内容，如通知、表单或图像。在 WordPress 网站中添加模态框弹窗可以增强用户交互体验，本文将介绍两种使用 GenerateBlocks 编辑器插件实现此功能的方法。

方法一：纯 CSS 方法

1. 添加 CSS 样式
   • 将以下 CSS 代码添加到子主题或主题自定义器的 “自定义 CSS 代码” 部分。

/\* CSS-Only Modal \*/
.modal-backdrop {
        display: flex;
        z-index: 100;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 150ms ease-in-out;
        padding: 2em;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0,.5);
        width: 100vw;
        height: 100vh;
        pointer-events: none;
}
.modal-backdrop:target {
        opacity: 1;
        pointer-events: auto;
}
.modal-content {
        position: relative;
        margin-left: auto;
        margin-right: auto;
}
.close {
        position: absolute;
        top: 0;
        right: 0;
        transform: rotate(45deg);
}

2. 创建触发按钮
   • 在要添加模态框的页面编辑中，添加一个新的 Container 容器块。
   • 选中该容器，在 “Advanced” 高级选项卡下的 “HTML Anchor” 锚点选项中输入 “modal-trigger-section”。
   • 在容器内添加一个 GenerateBlocks Buttons 块，设置样式并添加链接 “#modal”。
3. 构建模态框内容
   • 在页面添加一个新容器，位置可在触发按钮容器下方，当然也可以在页面最底部。
   • 选中新容器，在 “Advanced” 高级选项卡下的 “HTML Anchor” 锚点选项中添加 “modal”，在 “Additional CSS class (es)” 添加 “modal-backdrop”这个 CSS 类。
   • 在这个容器内再嵌套一个容器，为内层容器添加 “modal-content” 这个 CSS 类。可根据需要设置样式，如背景色、内边距、阴影等。
   • 在内层容器中添加一个 GenerateBlocks Button 块作为关闭按钮，设置样式（如添加 “+” 图标并旋转 45 度变为 “X”），禁用文字内容，添加 “close” 这个 CSS 类，然后将其链接到 “#modal-trigger-section”。
   • 根据需求添加模态框内的内容，如标题、文本等。

这是一个纯 CSS 模态弹窗演示

这是一个弹窗测试

这是测试文本

方法二：GenerateBlocks 结合 JavaScript 方法

1. 创建模态框容器
   • 添加一个 GenerateBlocks Container 容器块，按需设置样式并添加内容。
   • 选中容器块，在 “Advanced” 高级选项部分添加 “modal” 类。
2. 创建打开模态框按钮
   • 添加一个按钮并设置样式。
   • 选中按钮块，在 “Advanced” 高级选项部分将类型改为 “<button>” 并添加 “openmodal” 类。
3. 添加 JavaScript 代码
   • 添加一个 Custom HTML 块，将以下 JavaScript 和 CSS 代码添加进去。

<script>
// 查找类名为"modal"的容器并将其<div>转换为<dialog>
const modal = document.querySelector(".modal");
const dialog = document.createElement("dialog");
dialog.innerHTML = modal.innerHTML;
modal.replaceWith(dialog);

const openDialog = document.querySelector(".openmodal");

// 点击按钮时打开模态框
openDialog.addEventListener("click", e => {
  dialog.showModal() 
})

// 点击模态框外部时关闭模态框
dialog.addEventListener("click", e => {
  const dialogDimensions = dialog.getBoundingClientRect()
  if (
    e.clientX < dialogDimensions.left ||
    e.clientX > dialogDimensions.right ||
    e.clientY < dialogDimensions.top ||
    e.clientY > dialogDimensions.bottom
  ) {
    dialog.close();
  } else {
    
  }
})
</script>
<style>
dialog::backdrop {
  background-color: rgba(0, 0, 0, .5);
}
</style>

这是一个 JavaScript 模态弹窗演示

这是一个弹窗测试

这是测试文本，点击外部可关闭该模态框弹窗

两种方法的特点

• 纯 CSS 方法：优点是无需添加插件和使用 JavaScript，仅通过 CSS 和 GenerateBlocks 就能实现简单模态框，且可在不同网站复制粘贴使用；缺点是不能通过点击背景或按 Esc 键关闭模态框，关闭时可能有轻微页面跳动，对无障碍访问支持不够好，处理多个弹窗时较复杂。
• GenerateBlocks 结合 JavaScript 方法：使用默认的 <dialog> HTML 元素，在现代浏览器中兼容性好，即使 JavaScript 加载失败内容仍会显示，但需要添加一定量的 JavaScript 代码，相对纯 CSS 方法更复杂一些。

通过以上两种方法，您可以在使用 GenerateBlocks 编辑器插件的 WordPress 网站中轻松实现模态框弹窗效果。第一种方法通过 CSS 更适合需要高度自定义的用户，第二种方法则利用 GenerateBlocks 的功能与 JavaScript 相结合实现更简单的操作。根据您的需求选择合适的方案，提升网站的交互体验！

转载声明

本文转自 CSS Only Modal with GenerateBlocks，由 WordPress 建站帮翻译、整理后发布，相关版权归原作者或原出处所有。

参考来源：

• How to create a modal in WordPress using GenerateBlocks