在前端开发中，弹出层是非常常见的效果，可以用来实现提示、菜单、登录等功能。本文将介绍如何使用 jQuery 和 HTML5 实现一个简单的弹出层，并添加遮罩背景。
1. 准备工作
我们需要引入 jQuery 库和一个样式文件：
<head> <meta charset="UTF-8"> <title>jQuery 弹出层</title> <script src="https://cdn.bootcss.com/jquery/3.6.0/jquery.min.js"></script> <link rel="stylesheet" href="popup.css"> </head>
样式文件 popup.css 定义了弹出层的样式和遮罩背景的样式：
-- -------------------- ---- ------- ------ - -------- ----- --------- ------ ---- ---- ----- ---- ---------- --------------- ------ ------ ------ ------- ------ ----------------- ----- -------- ----- ----------- --- --- ---- ------- -- -- ----- - ----- - -------- ----- --------- ------ ---- -- ----- -- ------ ----- ------- ----- ----------------- ------- -- -- ----- -------- ----- -
其中 .popup 是弹出层的样式，.mask 是遮罩背景的样式。
2. HTML 结构
我们需要在 HTML 中添加弹出层和遮罩背景的结构：
-- -------------------- ---- -------
------
------- -----------------------
---- --------------
--------------
---------------
------- -------------------------
------
---- -------------------
-------其中 #btn 是触发打开弹出层的按钮，.popup 是弹出层的结构，.mask 是遮罩背景的结构。在弹出层中，我们添加了一个标题和一些内容，并且定义了一个关闭按钮。
3. JavaScript 实现
我们使用 jQuery 来实现弹出层的打开和关闭。
首先，当用户点击按钮时，我们需要让弹出层和遮罩背景显示出来：
$(function() {
$('#btn').click(function() {
$('.popup').show();
$('.mask').show();
});
});然后，当用户点击关闭按钮或遮罩背景时，我们需要让弹出层和遮罩背景隐藏起来：
$(function() {
$('.close, .mask').click(function() {
$('.popup').hide();
$('.mask').hide();
});
});最终，我们得到了一个完整的弹出层效果。
4. 示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- -----------
------- ------------------------------------------------------------------
----- ---------------- -----------------
-------
------
------- -----------------------
---- --------------
--------------
---------------
------- -------------------------
------
---- -------------------
--------
------------ -
-------------------------- -
-------------------
------------------
---
---------- ------------------------ -
-------------------
---------------
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------