在前端开发中，对话框（Dialog）是一个很常见的组件。其中，带有“是”和“否”选项的对话框也是比较常用的一种类型。本篇文章将介绍如何使用HTML、CSS和JavaScript来创建这样一种对话框，并提供代码示例以便读者学习和实践。
HTML 结构
首先，我们需要创建一个 HTML 文件并添加所需的结构。以下是一个简单的 HTML 结构：
--------- -----
----- ----------
------
----- ----------------
---------- -- -- --------------
-------
------
---- ---------------
---- ----------------
------ --- ---- --- ---- -- ------ ---- ---------
------
---- ----------------
------- ---------- -------------------
------- ---------- ---------------------
------
------
-------
-------上述代码中，我们创建了一个基本的 HTML 结构，其中包含一个名为 dialog 的 div 容器和两个按钮： No 和 Yes。容器内还有一个名为 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