版权声明：菜鸟老五 https://blog.csdn.net/qq_35695041/article/details/81868517
前提下载一个js文件引入哦！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>
<style>
body {
margin: 0 auto;
}
.cont {
position: relative;
width: 100%;
height: 70px;
}
/*显示按钮*/
.shows {
position: absolute;
left: 0;
width: 50%;
font-size: 20px;
height: 70px;
text-align: center;
background-color: #2AC845;
color: #fff;
line-height: 70px;
}
/*隐藏*/
.nones {
position: absolute;
right: 0;
width: 50%;
font-size: 20px;
height: 70px;
text-align: center;
background-color: #DD524D;
color: #fff;
line-height: 70px;
}
/*弹窗*/
.dislog {
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
display: none;
text-align: center;
background-color: #000;
opacity: 0.8;
}
/*状态*/
.list {
position: relative;
width: 100%;
height: 70px;
}
.dis_cont {
position: relative;
border-radius: 10px;
top: 25%;
width: 80%;
display: inline-block;
height: 160px;
background-color: #2AC845;
}
/*确认取消*/
.dis_bott {
position: absolute;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top: 1px solid #ddd;
width: 100%;
height: 70px;
background-color: #f5f5f5;
bottom: 0px;
}
/*取消按钮*/
.left_name {
position: absolute;
border-bottom-left-radius: 10px;
text-align: center;
left: 0px;
width: 50%;
height: 70px;
line-height: 70px;
background-color: #fff;
}
/*确认*/
.right_name {
position: absolute;
text-align: center;
border-bottom-right-radius: 10px;
right: 0px;
width: 49%;
height: 70px;
line-height: 70px;
background-color: #fff;
}
/* 提示*/
.cont_dis {
position: relative;
border-radius: 10px;
text-align: center;
width: 100%;
height: 90px;
font-size: 20px;
display: flex;
align-items: center;
color: #fff;
box-sizing: border-box;
padding: 20px 20px;
}
</style>
<body>
<!--居中显示视图-->
<div class="dislog" style="display: {{nones}};">
<!--内容-->
<div class="dis_cont">
<div class="cont_dis">
朋友，给老五点个赞好吗？
</div>
<div class="dis_bott">
<label class="left_name" onclick="cances()">取消</label>
<label class="right_name" onclick="submits()">确认</label>
</div>
</div>
</div>
<div class="cont">
<div class="list">
<label class="shows" onclick="shows()">显示</label>
<label class="nones" onclick="nones()">隐藏</label>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
//显示遮罩弹窗
function shows(){
$(".dislog").css("display","block");
}
//隐藏遮罩弹窗
function nones(){
$(".dislog").css("display","none");
}
function submits(){
window.location="https://blog.csdn.net/qq_35695041";
}
//取消
function cances(){
$(".dislog").css("display","none");
}
</script>
</body>
</html>