如何创建具有“是”和“否”选项的对话框?

阅读时长 4 分钟读完

在前端开发中,对话框(Dialog)是一个很常见的组件。其中,带有“是”和“否”选项的对话框也是比较常用的一种类型。本篇文章将介绍如何使用HTML、CSS和JavaScript来创建这样一种对话框,并提供代码示例以便读者学习和实践。

HTML 结构

首先,我们需要创建一个 HTML 文件并添加所需的结构。以下是一个简单的 HTML 结构:

-- -------------------- ---- -------
--------- -----
----- ----------
------
  ----- ----------------
  ---------- -- -- --------------
-------
------
  ---- ---------------
    ---- ----------------
      ------ --- ---- --- ---- -- ------ ---- ---------
    ------
    ---- ----------------
      ------- ---------- -------------------
      ------- ---------- ---------------------
    ------
  ------
-------
-------

上述代码中,我们创建了一个基本的 HTML 结构,其中包含一个名为 dialog 的 div 容器和两个按钮: NoYes。容器内还有一个名为 content 的 div,用于显示对话框的标题和内容。此外,我们还在 <head> 中添加了页面标题。

CSS 样式

接下来,我们需要为对话框添加样式。以下是一个示例 CSS 样式:

-- -------------------- ---- -------
------- -
  --------- ------
  ---- ----
  ----- ----
  ---------- --------------- ------
  ----------------- -----
  -------------- ----
  ----------- - - ---- ---------------
  -------- -----
  ------ ------
  ---------- ----
-

-------- -
  -------------- -----
  ----------- -------
-

-------- -
  -------- -----
  ---------------- -------
-

---- -
  ------- -----
  -------------- ----
  ------ -----
  ------- --------
  ---------- -----
  -------- ---- -----
  --------------- ----------
  ----------- --- --- ------------
-

------- -
  ----------------- --------
  ------------- -----
-

-------- -
  ----------------- --------
-

上述代码中,我们为对话框添加了一些基本的样式,包括位置、背景颜色、阴影和内边距等。我们还定义了一个名为 btn 的 CSS 类,它将应用于所有按钮,并根据按钮的不同类型(“No” 或 “Yes”)设置了不同的背景颜色。

JavaScript 交互

最后,我们需要为我们的对话框添加交互。以下是一个示例 JavaScript 代码:

-- -------------------- ---- -------
----- ------ - ----------------------------------
----- ----- - ----------------------------------
----- ------ - -----------------------------------

-------- ------------ -
  -----------------------------
-

-------- ------------- -
  --------------------------------
-

------------------------------- -------------
-------------------------------- -------------

-------------

上述代码中,我们首先通过 document.querySelector() 方法获取了所需的对话框及其按钮的引用。接着,我们定义了一个名为 openDialog() 的函数,该函数将在用户单击某个按钮时打开对话框。我们还定义了一个名为 closeDialog() 的函数,该函数将关闭对话框并从屏幕上移除。

最后,我们使用 addEventListener() 方法为 “No” 和 “Yes” 按钮添加了单击事件,并在页面加载时自动打开了对话框。

结论

通过本篇文章,我们学习了如何使用 HTML、CSS 和 JavaScript 来创建带有“是”和“否”选项

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/8193

纠错
反馈