元素：模态框的本机解决方案" />
简介： 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>
说明：
现在，我知道您在想什么：“但是如果用户在表单外部（在背景上）单击怎么办？”别担心——我会支持你的！
点击背景时关闭对话框：
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中文网其他相关文章！
