手写弹窗原理：利用html+css+js，两种方法（js体现）：
一个display的隐藏和显示，一个标签的append()跟remove()。
css代码：
/*遮罩层*/
.black_over{
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #000000c7;
z-index: 1020;
-moz-opacity: 0.8;
filter: alpha(opacity=50);
}
/*弹框*/
.popup{
position: relative;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -125px;
width: 500px;
height: 250px;
background-color: #F0F5FF;
z-index: 1099;
overflow: auto;
border-radius: 10px;
border: 1px solid #d3d3d3;
}
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="black_over">
<div class="popup">
<input type="button" class="shut_btn" value="关闭弹框">
</div>
</div>
<div>
<input type="button" class="open_btn" value="打开弹框">
</div>
</body>
</html>
方法一js代码：
/*打开弹框*/
$(".open_btn").click(function(){
$(".black_over").css("display","block");
})
/*关闭弹框*/
$(".shut_btn").click(function(){
$(".black_over").css("display","none");
})
方法二js代码：
/*打开弹框*/
$(".open_btn").click(function(){
$(".black_over").append('<div>'+'</div>');
})
/*关闭弹框*/
$(".shut_btn").click(function(){
$(".black_over").remove;
})
———— 四川稻城
网友评论