极客观点
项目管理
HarmonyOS
最近在练习做一个弹框，
===============[part 1]================================
先放代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>弹窗试验</title>
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.pop_wrap {
z-index: 1400;
width: 1360px;
position: absolute;
top: 150px;
display: none;
}
.pop_con {
width: 500px;
height: 200px;
margin: 0 auto 0;
background: #fafafa
}
.pop_p {
font-size: 20px;
margin-top: 50px;
text-align: center;
}
.pop_row {
margin-top: 50px;
}
.pop_btn {
text-align: center;
height: 30px;
}
.w_200 {
width: 200px;
}
.pop_mask {
z-index:1300;
position: absolute;
top:0px;
left:0px;
background:#000000;
opacity:0.5;
width:1920px;
height:2052px;
display: none;
}
</style>
</head>
<body>
<div class="pop_wrap" id="confirm_pop">
<div class="container pop_con">
<p class="pop_p">确定要取消么?</p>
<div class="row pop_row">
<div class="col-xs-6 pop_btn">
<button type="button" id="btn_x" class="btn btn-lg btn-default w_200">算了</button>
</div>
<div class="col-xs-6 pop_btn">
<button type="button" id="btn_o" class="btn btn-lg btn-primary w_200">确定</button>
</div>
</div>
</div>
</div>
<input id="enter" type="button" value="点击">
<div class="pop_mask" id="pop_mask"></div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$('#enter').on("click", function(){
$("#pop_mask").show();
$("#confirm_pop").show();
$("#btn_x").on("click", function(){
alert("NO");
$("#confirm_pop").hide();
$("#pop_mask").hide();
});
$("#btn_o").on("click", function(){
alert("yes");
$("#confirm_pop").hide();
$("#pop_mask").hide();
});
});
});
</script>
</body>
</html>
发现第一个问题：
【问题 1】我是用 “弹框div + mask div”的办法做“模态弹框”的，方法是用 JQUERY 让弹框/mask一起show、一起hide。<< 为了调试方便，我给每一个弹框按钮（NO和YES）都加了alert()
这里出了个问题：第一次弹出后我按动按钮，alert跳出一次、弹框和mask都hide; 第二次我再按动按钮并点击弹框里的按钮，alert跳出两次、弹框和mask--hide！第三次，则alert跳三次......
。。。。。。。。。。。。。。》》》 求问原因
===============[part 2]================================
【问题 2】
然后，我懂了、需要用jquery生成DOM 再append到DOM中去，然后、每次点击yes OR no之后，要remove这个弹框部分（.pop_wrap的div及其子div）！
so，继续放代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>弹窗试验</title>
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.pop_wrap {
z-index: 1400;
width: 1360px;
position: absolute;
top: 150px;
display: none;
}
.pop_con {
width: 500px;
height: 200px;
margin: 0 auto 0;
background: #fafafa
}
.pop_p {
font-size: 20px;
margin-top: 50px;
text-align: center;
}
.pop_row {
margin-top: 50px;
}
.pop_btn {
text-align: center;
height: 30px;
}
.w_200 {
width: 200px;
}
.pop_mask {
z-index:1300;
position: absolute;
top:0px;
left:0px;
background:#000000;
opacity:0.5;
width:1920px;
height:2052px;
display: none;
}
</style>
</head>
<body>
<!-- <div class="pop_wrap" id="confirm_pop">
<div class="container pop_con">
<p class="pop_p">确定要取消么?</p>
<div class="row pop_row">
<div class="col-xs-6 pop_btn">
<button type="button" id="btn_x" class="btn btn-lg btn-default w_200">算了</button>
</div>
<div class="col-xs-6 pop_btn">
<button type="button" id="btn_o" class="btn btn-lg btn-primary w_200">确定</button>
</div>
</div>
</div>
</div> -->
<input id="enter" type="button" value="点击">
<div class="pop_mask" id="pop_mask"></div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$('#enter').on("click", function(){
$("#pop_mask").show();
var pop = $('<div class="pop_wrap" id="confirm_pop"><div class="container pop_con"><p class="pop_p">确定要取消么?</p><div class="row pop_row"><div class="col-xs-6 pop_btn"><button type="button" id="btn_x" class="btn btn-lg btn-default w_200">算了</button></div><div class="col-xs-6 pop_btn"><button type="button" id="btn_o" class="btn btn-lg btn-primary w_200">确定</button></div></div></div></div>');
$('body').prepend(pop);
// $("#confirm_pop").show();
$("#btn_x").on("click", function(){
$("#confirm_pop").hide();
$("#pop_mask").remove();
});
$("#btn_o").on("click", function(){
$("#confirm_pop").hide();
$("#pop_mask").remove();
});
});
});
</script>
</body>
</html>
好了，这下弹框都不显示了！！.....F12里面能看到，这个DOM已经被加入到DOM了，但是鼠标hover在element代码上，屏幕里面没有任何高亮显示的色块，也就是 >>> 这个弹框的DOM、理论上存在，实际上不存在！.....
。。。。。。。。。。。。。。》》》 求问原因
第一个问题，姑且把它叫做嵌套注册事件吧，就是你在注册事件处理的时候，不要嵌套着去写，你这个的问题就在于你把两个需要hide的事件处理都写进一个click里边了，这样相当于你每次click时、都会给相应的DOM绑上一次事件处理，所以就会出你这样的问题，就是因为你重复的绑了很多。这里你不要把这个on理解成是事件发生时要干嘛干嘛，这个on更像是一种事先约定，提前讲好，如果事件发生了，那我跑一段function，但是你重复注册当然就会跑上好几次。
第二个问题，手机答题所以没跑你的代码，感觉你可以换成
.append()方法再试试吧，HTML代码里、越靠上层级越低。