recently I have been practicing making a pop-up box,
= [part 1] =
put the code first:
<!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"> -->
<!-- 3meta**** -->
<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: -sharpfafafa
}
.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:-sharp000000;
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">?
<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(){
$("-sharpenter").on("click", function(){
$("-sharppop_mask").show();
$("-sharpconfirm_pop").show();
$("-sharpbtn_x").on("click", function(){
alert("NO");
$("-sharpconfirm_pop").hide();
$("-sharppop_mask").hide();
});
$("-sharpbtn_o").on("click", function(){
alert("yes");
$("-sharpconfirm_pop").hide();
$("-sharppop_mask").hide();
});
});
});
</script>
</body>
</html>
found the first problem:
[question 1] I used the method of "bounce frame div + mask div" to make "modal bounce frame". The method is to use JQUERY to make the bounce frame / mask show and hide together. < < for debugging convenience, I added alert () to every pop-up button (NO and YES)
there is a problem here: after the first pop-up, I press the button, alert pops out once, pop-up box and mask all hide; the second time I press the button and click the button in the pop-up box, alert pops up twice, the pop-up box and Maskmurade show! The third time, alert jumps three times.
. "the reason for asking
= [part 2] =
[question 2]
then, I understand that I need to use jquery to generate DOM and then append to DOM, and then, after each click on yes OR no, I want to remove this pop-up box part (.pop_wrap "s div and its sub-div)!
so, continue to play the code:
<!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"> -->
<!-- 3meta**** -->
<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: -sharpfafafa
}
.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:-sharp000000;
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">?
<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(){
$("-sharpenter").on("click", function(){
$("-sharppop_mask").show();
var pop = $("<div class="pop_wrap" id="confirm_pop"><div class="container pop_con"><p class="pop_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);
// $("-sharpconfirm_pop").show();
$("-sharpbtn_x").on("click", function(){
$("-sharpconfirm_pop").hide();
$("-sharppop_mask").remove();
});
$("-sharpbtn_o").on("click", function(){
$("-sharpconfirm_pop").hide();
$("-sharppop_mask").remove();
});
});
});
</script>
</body>
</html>
all right, this pop-up box is not even displayed! F12 can see that this DOM has been added to the DOM, but the mouse hover in the element code, there are no highlighted color blocks on the screen, that is, the DOM of this pop-up box exists in theory, but does not exist in practice! .
. "the reason for asking