jquery - 页面弹框 - 阻止事件冒泡示例
需求
编写一个简单的页面弹框的示例，功能要求如下：
- 一个点击按钮，点击可以弹出一个弹框
- 弹框固定出现在页面的中间位置
- 需要写一个背景mask，用于遮掩背景，设置透明度0.3
- 点击弹框外的位置，弹框就可以消失不见，可以使用fadeOut()
- 点击弹框内的文本框可以输入内容，弹框不会消失不见
- 点击弹框右上角的 × 号，则关闭弹框
看完了需求，首先快速写好一波html + css
编写基本html + css
基本html+css的代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.4.0.min.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
.pop_con{
/*display: none;*/
}
.pop{
width: 300px;
height: 300px;
background-color: #fff;
border:3px solid #000;
position: fixed;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
z-index: 9999;
}
.pop_con .mask{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgb(0,0,0,0.3);
z-index: 9990;
}
#close{
position: absolute;
right: 5px;
top: 5px;
font-size: 16px;
font-weight: 755;
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<input type="button" name="" value="弹出" id="btn">
<div class="pop_con">
<div class="pop">
<label>用户信息：</label>
<input type="text" name="" value="" id="search" placeholder="请输入查询的信息">
<a href="#" id="close">×</a>
</div>
<div class="mask"></div>
</div>
</body>
</html>
好了，下一步就是设置.pop_con隐藏，设置display:none，然后编写jquery，设置点击按钮#btn ，触发click()事件的时候，设置.pop_con使用fateIn()显示。
编写点击#btn按钮，显示弹框.pop_con
- 首先设置
.pop_con隐藏
- 编写
#btn的click()事件
好了，这里已经实现了点击显示的操作了，那么下一步要编写点击弹框的其他部分，则弹框隐藏。
编写点击弹框外部，则隐藏
写了点击外部$(document)就隐藏的事件发现，当点击#btn的按钮，触发了fadeIn()方法显示弹框。但是，由于事件冒泡，这个click()一直冒泡到了$(documen)，导致直接触发了$(document)的click()，从而直接执行了fadeOut()，使得弹框出现一会又立即消失的情况。
解决#btn的事件冒泡，使用return false;
在阻止了#btn按钮的click()事件冒泡到$(document)之后，那么弹框就可以正常显示了。
同时，点击文档的任意一个地方都是可以隐藏弹框的。
但是，此时点击弹框内也是会让弹框消失的，那如果我要填写弹框的input框来写内容，还没写就消失了，这该怎么办呢？
阻止.pop弹框的click()事件，直接return false，就可以避免点击弹框的时候执行$(document).click()里面的fadeOut()事件
这个思路不涉及事件冒泡的阻止，但是属于同一个click()方法的阻止，因为点击$(document)的click()事件应该不会冒泡到它下面的元素.pop，不过可以在这里验证一下。
验证点击$(document)的click()事件是否会冒泡至下方的元素.pop
在.pop写一个alert()就可以验证出来了。
点击.pop以外的$(document)部分并不会至上而下得触发到.pop的click()方法，从而直接执行$(document)内的fadeOut,并没有弹出.pop的alert()。
点击.pop的click()方法，触发了alert()事件，如下:
执行完毕了alert()的事件之后，就继续冒泡将click()方法至下而上得冒泡至$(document)，导致$(document)执行fadeOut()。
在这个验证的过程中，更加确认了刚才在.pop使用return false;的确是用来阻止click()的冒泡至$(document)的。
最后，编写弹框右上角的× 号，点击则隐藏弹框
因为现在点击弹框都不会隐藏，所以可以单独给#close写一个click()方法，设置触发fadeOut()事件。
点击#close后，正常执行fadeOut()，并且在.pop处已经截断了事件冒泡，所以在#close的 click()最后不用写return false;。
写到这里基本已经演示完了关于事件冒泡的弹框示例了。
完整代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.4.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$(".pop_con").fadeIn();
return false;
})
$(document).click(function(){
$(".pop_con").fadeOut();
})
$(".pop").click(function(){
return false;
// alert("pop!!");
})
$("#close").click(function(){
$(".pop_con").fadeOut();
})
})
</script>
<style type="text/css">
.pop_con{
display: none;
}
.pop{
width: 300px;
height: 300px;
background-color: #fff;
border:3px solid #000;
position: fixed;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
z-index: 9999;
}
.pop_con .mask{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgb(0,0,0,0.3);
z-index: 9990;
}
#close{
position: absolute;
right: 5px;
top: 5px;
font-size: 16px;
font-weight: 755;
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<input type="button" name="" value="弹出" id="btn">
<div class="pop_con">
<div class="pop">
<label>用户信息：</label>
<input type="text" name="" value="" id="search" placeholder="请输入查询的信息">
<a href="#" id="close">×</a>
</div>
<div class="mask"></div>
</div>
</body>
</html>
