您的位置：首页 > Web前端 > JQuery

jquery-中的冒泡案例

2018-01-06 22:32 134 查看

<!DOCTYPE html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
<meta
h
4000
ttp-equiv="X-UA-Compatible"
content="ie=edge">
<link
rel="stylesheet"
href="../css/main.css">
<title>Document</title>
<script
src="../js/jquery-1.12.4.min.js"></script>
<script
type="text/javascript">
$(function () {
// 1.点击弹出按钮弹出提示框
$("#btn01").click(function (){

// $("#pop").show();
$("#pop").fadeIn();

return false;
})

// 2.选中空白的地方隐藏提示框
$(window).click(function (){
$("#pop").hide();
// $("#pop").fadeOut;

// 3.找到详情的提示框标签阻止冒泡

$(".pop_con").click(function () {
return false;
})

// 4.X 按钮
$("#shutoff").click(function (){
$("#pop").hide();
})
})
})
</script>
</head>
<body>
<input
type="button"
value="弹出弹框"
id="btn01">
<div
class="pop_main"
id="pop">
<div
class="pop_con">
<div
class="pop_title">
<h3>系统提示</h3>
<a
href="#" id="shutoff">×</a>
</div>
<div
class="pop_detail">
<p
class="pop_text">亲！请关注近期的优惠活动！</p>
</div>
<div
class="pop_footer">

</div>
</div>
<div
class="mask"></div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航