Material Design 是一种由 Google 推出的设计风格，主要体现在 Android 系统中。这种设计风格以平面、简洁和明亮的颜色为特点，同时为用户提供更好的操作体验。其中，对话框是一种非常常见的 UI 元素，它可以用于展示一些重要的内容或者提供一些交互的操作。本文将介绍如何使用 Material Design 实现自定义对话框，并提供示例代码。
前置条件
在开始本教程之前，你需要掌握以下技术：
- HTML 和 CSS 的基础知识
- JavaScript 的基础知识
- Material Design 的基础知识
同时，你需要准备以下开发工具：
- 一个代码编辑器，比如 VS Code
- 一个浏览器，比如 Chrome
实现对话框
在 Material Design 中，对话框分为两种类型：标准对话框和全屏对话框。标准对话框是指一个固定大小的框，用于展示一些较小的内容；而全屏对话框则是占据了整个屏幕的 UI 元素，用于展示一些较大的内容。在本教程中，我们将仅实现标准对话框。
HTML 结构
首先，我们需要定义一个 HTML 结构，并添加一些样式，使其看起来像一个对话框。在本文中，我们使用以下代码创建一个基本的对话框：
-- -------------------- ---- -------
---- -----------------
---- -------------------------
------- ------------------------
--- ---------------------------------
------- ---------------------------------------
---------
----- ----------------------
-----
-------
------- ------------------------
------- ------------------------------------
------- -----------------------------------
---------
------
------这个 HTML 结构有一个模态容器 div，一个模态内容 div，一个模态头部 header，一个模态标题 h2，一个关闭按钮 button，一个模态主体 main，一个模态底部 footer，和两个操作按钮 button。
在这段代码中，我们还为每个元素添加了一个类别，用于在 CSS 中进行样式定义。
CSS 样式
接下来，我们需要添加一些 CSS 样式来定义对话框的外观。在以下代码中，我们在 .md-modal 中定义了模态容器样式。
-- -------------------- ---- ------- --------- - --------- ------ ---- -- ----- -- ------ -- ------- -- ----------------- ------- -- -- ---- -------- -- -------- ----- - ----------------- - --------- --------- ---- ---- ----- ---- ---------- --------------- ------ ----------------- ----- -------------- ---- -------- ----- ---------- ------ - ---------------- - -------- ----- ---------------- -------------- ------------ ------- -------------- ----- - --------------- - ---------- -------- ------------ ----- ------- -- - --------------- - ------- ----- ----------------- ------------ ------ ----- ---------- ----- ------- -------- - -------------- - ------------ ----- --------------- ----- - ---------------- - -------- ----- ---------------- --------- ------------ ------- - ------------------ ---------------- - ------- ----- ----------------- ------------ ------ -------- ---------- ----- ------------ ----- ------------ ----- ------- -------- -
这些样式定义了模态容器 .md-modal 的位置、背景色、z-index、隐藏等；模态内容 .md-modal-content 的位置、外观、大小等；模态头部 .md-modal-header 的外观、大小等；关闭按钮 .md-modal-close 的位置、背景色、大小等；模态主体 .md-modal-body 的外观等；模态底部 .md-modal-footer 的外观等。
接下来，在 CSS 中添加以下样式，以显示对话框：
.md-modal.show {
display: flex;
align-items: center;
justify-content: center;
}这个样式将我们的对话框设置为针对其父透明度为 40% 的浮动层，并将其弹出显示。
JavaScript 实现
最后，我们需要添加一些 JavaScript 来启动对话框并实现其效果。在以下代码中，我们使用 JavaScript 中的事件监听器和类操作函数来实现这一目标。
-- -------------------- ---- ------- ----- ----- - ------------------------------------ ----- --------- - -- -- ---------------------------- ----- --------- - -- -- ------------------------------- ----- ---------- - -- -- - ------------ - --------------------------------------------------------------------- -- -- - ------------- --- -------------------------------------------------------------------- -- -- - ------------- --- ------------------------------------------- ------------------------ -- - ------------------------------ ------------ --- --------------------------------------------------------------------- ----- -- - ------------------------ --- ----- --------- - -- -- - ------------ - ------------
这段代码定义了一个 modal 变量，用于引用 HTML 中的模态框元素。我们还定义了 modalShow 函数和 modalHide 函数，用于显示或隐藏模态框，以及 modalClose 函数，用于关闭模态框。
接下来，我们为 “确认” 按钮和 “取消” 按钮添加了 click 事件监听器，用于在单击时关闭模态框。我们还为模态框的关闭按钮和背景添加相同的 click 事件监听器，用于在单击时关闭模态框。我们还添加了一个 click 事件监听器到对话框的内容元素，以防止点击对话框内容时关闭对话框。
最后，我们定义了一个 showModal 函数，用于启动对话框的显示。在这里，我们仅调用 showModal() 函数，来显示对话框。
示例代码
以下代码是实现了一个基本的 Material Design 对话框，并添加了一些 JavaScript 代码来显示和控制它。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ------ -----------
-------
--------- -
--------- ------
---- --
----- --
------ --
------- --
----------------- ------- -- -- ----
-------- --
-------- -----
-
-------------- -
-------- -----
------------ -------
---------------- -------
-
----------------- -
--------- ---------
---- ----
----- ----
---------- --------------- ------
----------------- -----
-------------- ----
-------- -----
---------- ------
-
---------------- -
-------- -----
---------------- --------------
------------ -------
-------------- -----
-
--------------- -
---------- --------
------------ -----
------- --
-
--------------- -
------- -----
----------------- ------------
------ -----
---------- -----
------- --------
-
-------------- -
------------ -----
--------------- -----
-
---------------- -
-------- -----
---------------- ---------
------------ -------
-
------------------ ---------------- -
------- -----
----------------- ------------
------ --------
---------- -----
------------ -----
------------ -----
------- --------
-
--------
-------
------
---- --- ---
---- -----------------
---- -------------------------
------- ------------------------
--- ---------------------------------
------- ---------------------------------------
---------
----- ----------------------
-----
-------
------- ------------------------
------- ------------------------------------
------- -----------------------------------
---------
------
------
---- -- ---
------- ------------------------------------
--------
----- ----- - ------------------------------------
----- --------- - -- -- ----------------------------
----- --------- - -- -- -------------------------------
----- ---------- - -- -- -
------------
-
--------------------------------------------------------------------- -- -- -
-------------
---
-------------------------------------------------------------------- -- -- -
-------------
---
------------------------------------------- ------------------------ -- -
------------------------------ ------------
---
--------------------------------------------------------------------- ----- -- -
------------------------
---
----- --------- - -- -- -
------------
-
------------
---------
-------
-------总结
本文介绍了如何使用 Material Design 实现自定义对话框。在这里，我们定义了一个 HTML 结构并添加了一些 CSS 样式，用于设置对话框的外观。接下来，我们添加了一些 JavaScript 代码，以显示和控制对话框的效果。我们希望这篇文章能够帮助你了解如何使用 Material Design 实现自定义对话框，并启发你使用这些新技术来构建更好的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64771fcb968c7c53b03b006f