模态框（Modal）是一种常见的用户界面组件，用于显示临时性的内容或者与主内容相关的功能，例如提示信息、登录窗口、图片查看器等。本文将介绍如何使用HTML5和CSS3创建一个基本的模态框，并提供示例代码和指导。
HTML结构
我们首先需要定义模态框的HTML结构，通常包含一个遮罩层和一个弹出层。以下是一个基本的HTML结构：
--------- -----
------
------
------------ ------------
-------
-- ----- --
--------
-------
------
---- --- ---
---- ----------------------------
---- --- ---
---- --------------
---- ---------------------
--------- ----------
------- -------------------------------------
------
---- ----------------------
-------- -----------
------
---- ---------------------
------- ---------------------------------------
------- -------------------------------------
------
------
--------
-- ------------
---------
-------
-------其中，遮罩层和弹出层都使用了div元素来定义。在弹出层中，我们使用了三个div元素来分别定义标题栏、内容和按钮区域。
CSS样式
接下来，我们需要使用CSS样式来实现模态框的外观和行为。以下是一个基本的CSS样式：
-- ----- --
-------------- -
--------- ------
---- --
----- --
------ -----
------- -----
----------------- ------- -- -- -----
-------- ----
-
-- ----- --
------ -
--------- ------
---- ----
----- ----
---------- --------------- ------
------ ------
----------------- -----
-------------- ----
----------- - - ---- ------- -- -- -----
-------- -----
-
-- ----- --
------------- -
-------- -----
---------------- --------------
------------ -------
-------- -----
----------------- -----
----------------------- ----
------------------------ ----
-
-- ------ --
------------- -
---------- -------
------ -----
------- -----
----------------- ------------
------- --------
-
-- ---- --
-------------- -
-------- -----
-
-- ------ --
------------- -
-------- -----
---------------- ---------
------------ -------
-------- -----
----------------- -----
-------------------------- ----
--------------------------- ----
-
-- ------ --
--------------- -
------------ -----
-------- --- -----
------- -----
-------------- ----
----------------- --------
------ -----
------- --------
-
-- ------ --
-------------- -
-------- --- -----
------- -----
-------------- ----
----------------- --------
------ -----
------- --------
-我们使用了众多的CSS属性来实现模态框的外观和行为，例如position、top、left、transform、width、background-color、border-radius、box-shadow等。
JavaScript交互
最后，我们需要使用JavaScript来实现模态
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/9068