掌握 HTMLlt;dialog> 元素：模态框的本机解决方案

元素：模态框的本机解决方案" />

简介： Dialog 标签是在 HTML5 中引入的，您知道这意味着什么，仅此而已被链接到外部解决方案，例如用于这些模式和弹出窗口的 Bootstrap！借助 HTML5 的原生元素，您可以直接在代码中创建对话框、提示和弹出窗口。

让我们在对话框标签内创建一个简单的表单和一个按钮，单击该按钮将神奇地打开该表单。

创建对话框（比您想象的更简单！）：

<dialog id="my-dialog">
    <div class="content">
      <form method="dialog">
        <p>Form inside a dialog</p>
        <div>
          <label for="name">Name: </label>
          <input type="text" id="name" name="name" />
        </div>
        <menu>
            <button type="submit">Submit</button>
            <button type="button">Cancel</button>
        </menu>
      </form>
    </div>
</dialog>
<button class="open-btn">Open Dialog</button>

说明：我们在其中创建了一个嵌套表单。该表单要求提供名称（因为命名当然是编程中最难的部分）。我们添加了两个 CTA，一个用于提交表单，另一个用于取消表单。简单易行。

让我们切换对话框的可见性：

默认情况下，对话框是害羞的（即，它们是隐藏的），但不要担心！只需一点 JavaScript，我们就可以让它们付诸行动！这是魔法咒语：

<script>
   const dialog = document.getElementById("my-dialog");

   function showDialog() {
     dialog.showModal();
   }

   function closeDialog() {
     dialog.close();
   }
</script>

说明：我们使用querySelector来选择我们的对话框。然后，我们编写两个函数——一个用于打开对话框，一个用于关闭对话框。就像那样 - 对话框根据您的命令打开和关闭！

实际 HTML 代码：

<dialog id="my-dialog" open="true">
   <div class="content">
     <form method="dialog">
       <p>Form inside a dialog</p>
       <div>
         <label for="name">Name: </label>
         <input type="text" id="name" name="name" />
       </div>
       <menu>
         <button type="submit">Submit</button>
         <button type="button" onclick="closeDialog()">Cancel</button>
       </menu>
     </form>
   </div>
</dialog>
<button class="open-btn" onclick="showDialog()">Open Dialog</button>

说明：

1. 我们已将 closeDialog() 附加到“取消”按钮。
2. “打开”按钮使用 showDialog() 打开对话框。

现在，我知道您在想什么：“但是如果用户在表单外部（在背景上）单击怎么办？”别担心——我会支持你的！

点击背景时关闭对话框：

dialog.addEventListener("click", function (event) {
     if (event.target === dialog) {
       closeDialog();
     }
});

说明：我们向对话框本身添加了一个事件侦听器，如果单击背景，该事件侦听器将关闭对话框。内容 div 是我们的保障——如果您单击内部，对话框将保持不变。但是点击外面呢？噗！不见了。

是时候设计对话框的样式了：

这里有一些基本的样式可以让你的对话框变得生动活泼。我们还将为时尚的模态外观添加一些背景透明度，这样它就不会掩盖周围的一切。”

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#root {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
}

#my-dialog {
  top: 50%;
  left: 50%;
  width: 60vw;
  position: absolute;
  border-radius: 10px;
  transform: translate(-50%, -50%);
}

#my-dialog .content {
  padding: 28px;
}

#my-dialog .content form {
  gap: 16px;
  display: flex;
  flex-direction: column;
}

dialog::backdrop {
  opacity: 0.5;
  background-color: #898989;
}

.open-btn {
  padding: 5px 10px;
}

亲自尝试一下！ ？

想要查看实际的对话框吗？查看此代码沙箱：

？点击这里打开代码沙箱！

您可以尝试代码、调整它，并现场观看奇迹的发生。 ?✨

结论：

就是这样！您现在已经掌握了 HTML5 元素。无论您想创建弹出窗口、提示还是完整表单，标签都是您最好的新朋友。

但是在开始之前，这里有一个专业提示：您应该为整个项目创建一个可重用的对话框组件。

嘿，如果这篇文章让您的生活更轻松，请不要忘记点赞、分享并表达一些爱。

编码愉快！

以上是掌握 HTMLlt;dialog> 元素：模态框的本机解决方案的详细内容。更多信息请关注PHP中文网其他相关文章！