HTML 对话框/窗口

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在本实验中,你将学习如何使用 HTML <dialog> 标签在网页上创建一个模态窗口或弹出框。我们将逐步指导你如何使用 <dialog> 标签创建一个示例对话框。

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70742{{"`HTML 对话框/窗口`"}} html/head_elems -.-> lab-70742{{"`HTML 对话框/窗口`"}} html/layout -.-> lab-70742{{"`HTML 对话框/窗口`"}} html/doc_flow -.-> lab-70742{{"`HTML 对话框/窗口`"}} html/forms -.-> lab-70742{{"`HTML 对话框/窗口`"}} html/inter_elems -.-> lab-70742{{"`HTML 对话框/窗口`"}} end

在 index.html 中添加 dialog 标签

<dialog> 标签需要一个开始标签和一个结束标签。在这一步中,我们将向 index.html 文件中添加基本的 HTML 结构和 <dialog> 标签。

<!doctype html>
<html>
  <head>
    <title>Modal Window using HTML dialog tag</title>
  </head>
  <body>
    <h1>Modal Window using HTML dialog tag</h1>

    <!-- Adding the dialog tag -->
    <dialog>
      <p>This is a sample dialog box!</p>
    </dialog>
  </body>
</html>

添加按钮以打开对话框

在这一步中,我们将创建一个按钮来打开对话框。我们将使用 JavaScript 在按钮点击时打开和关闭对话框。

<!doctype html>
<html>
  <head>
    <title>Modal Window using HTML dialog tag</title>
  </head>
  <body>
    <h1>Modal Window using HTML dialog tag</h1>

    <!-- Adding the dialog tag -->
    <dialog id="dialog">
      <p>This is a sample dialog box!</p>
    </dialog>

    <!-- Adding a button to open the dialog -->
    <button onclick="document.getElementById('dialog').showModal()">
      Open Dialog
    </button>

    <!-- Adding a button to close the dialog, which is hidden by default  -->
    <button onclick="document.getElementById('dialog').close()">
      Close Dialog
    </button>
  </body>
</html>

为对话框添加 CSS 样式

在这一步中,我们将为对话框添加一些 CSS 样式,使其看起来更加美观。

<!doctype html>
<html>
  <head>
    <title>Modal Window using HTML dialog tag</title>

    <!-- Adding styles for the dialog box -->
    <style>
      dialog {
        width: 300px;
        height: 150px;
        background-color: #f2f2f2;
        padding: 20px;
        border: 2px solid #000;
        border-radius: 10px;
        box-shadow: 0px 0px 10px #000;
        font-family: Arial, san-serif;
        font-size: 18px;
        color: #000;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Modal Window using HTML dialog tag</h1>

    <!-- Adding the dialog tag -->
    <dialog id="dialog">
      <p>This is a sample dialog box!</p>
    </dialog>

    <!-- Adding a button to open the dialog -->
    <button onclick="document.getElementById('dialog').showModal()">
      Open Dialog
    </button>

    <!-- Adding a button to close the dialog, which is hidden by default  -->
    <button onclick="document.getElementById('dialog').close()">
      Close Dialog
    </button>
  </body>
</html>

现在,我们的 HTML 代码已经完成,可以使用 HTML dialog 标签创建一个模态窗口。

总结

你已经成功完成了关于使用 HTML dialog 标签创建模态窗口的实验。在本实验中,我们逐步讨论了如何使用 HTML <dialog> 标签创建一个示例对话框。我们添加了一个简单的按钮,借助 JavaScript 来打开和关闭对话框。此外,我们还添加了一些基本的 CSS 样式以改善对话框的外观。

您可能感兴趣的其他 HTML 教程