一般来说，在登录、注册页面会需要这个效果，点击登录或注册按钮，弹出协议，点击协议空白处隐藏掉协议
javascript部分
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<script>
let isF = false;//定义一个开关用来给body做指示
$(".submit").click(function (e) {//注册按钮点击事件
e.stopPropagation();//阻止向上冒泡，只是该dom节点的事件
$("body").css({backgroundColor:"rgba(0,0,0,.2)",padding:"0 .10rem"});
$(".container").css({display:"block",top:"1.0rem",left:".10rem",width:"3.55rem"});
isF = true;
})
$(".container").click(function (e) {//点击注册按钮出来的协议，点击不让隐藏
e.stopPropagation();
$("body").css({backgroundColor:"rgba(0,0,0,.2)",padding:"0 .10rem"});
$(".container").css({display:"block",top:"1.0rem",left:".10rem",width:"3.55rem"});
isF = true;
})
$("body").click(function (e) {//body的点击事件
//e.stopImmediatePropagation();
if(isF){
$(".container").css({display: "none"});
$("body").css({backgroundColor: "#fff",padding:"0"});
isF = false;
}
else{
console.log(2)
}
})
$(".back").click(function (e) {//点击取消的按钮事件
e.stopPropagation();//不允许冒泡，只在该按钮上起作用
$(".container").css({display: "none"});
$("body").css({backgroundColor: "#fff",padding:"0"});
isF = false;
})
$(".go").click(function (e) {//点击取消的按钮事件
e.stopPropagation();//不允许冒泡，只在该按钮上起作用
//$(".container").css({display: "none"});
//$("body").css({backgroundColor: "#fff",padding:"0"});
// isF = false;
//执行体
})
</script>
其余代码部分（html+css）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{
margin: 0;
padding: 0;
}
html{
font-size: 26.67vw;
}
html,body{
height: 100%;
font-family: 'Microsoft YaHei';
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling:touch;
}
a{
text-decoration: none;
font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif;
}
img{
border: none;
}
ul li,ol li{
list-style: none;
}
p {
word-wrap:break-word; /* 不够的单词自动换行 而不会被截掉 */
}
.clear{
zoom: 1;
}
.clear:after {
content: "";/* 用来清除浮动带来的高度塌陷 */
display: block;
visibility: hidden;
height: 0;
clear: both;
}
em, i {
font-style: normal;
}
b,strong{
font-weight: 100;
}
/*单行文本省略号*/
.one-txt{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*多行溢出*/
.many-txt{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.overflow {overflow:hidden; }
.default-d{
height: 1rem;
}
.con{
width: 80%;
margin: 0 auto;
}
.user{
display: block;
width: 80%;
height: .34rem;
border: 1px solid #eaeaea;
outline: deepskyblue;
margin-bottom: .2rem;
border-radius: 5px;
text-indent: .10rem;
color: #666;
}
.pass{
display: block;
width: 80%;
height: .34rem;
border: 1px solid #eaeaea;
outline: deepskyblue;
margin-bottom: .2rem;
border-radius: 5px;
text-indent: .10rem;
color: #666;
}
.submit{
color: #fff;
font-size: .14rem;
padding: 0 .12rem;
line-height: .30rem;
border-radius: 5px;
background: deepskyblue;
border: 1px solid deepskyblue;
cursor: pointer;
outline: none;
}
.box{
position: fixed;
height: 100%;
width: 100%;
background: rgba(0,0,0,.2);
display: none;
left: 0;
top: 0;
z-index: 20;
}
.ccc{
padding: 0 .10rem;
z-index: 30;
background: rgba(0,0,0,.2);
}
.container{
box-sizing: border-box;
padding: .10rem;
height: auto;
background: #fff;
border-radius: 8px;
position: fixed;
display: none;
z-index: 1000;
}
.title{
font-size: .16rem;
color: #333;
line-height: .30rem;
}
.con1{
font-size: .14rem;
color: #666;
line-height: .24rem;
}
.con1-item{
font-size: .12rem;
color: #666;
line-height: .20rem;
}
.con2{
font-size: .14rem;
color: #666;
line-height: .24rem;
margin-bottom: .10rem;
}
.con2 span{
color: #333;
}
.con2 a{
color: #005bba;
font-size: .14rem;
line-height: .24rem;
}
.con-a{
display: flex;
justify-content: center;
align-items: center;
}
.con-a a{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: .14rem;
color: #666;
width: 50%;
text-align: center;
line-height: .24rem;
}
.con-a a:first-child{
border-right: 1px solid #eaeaea;
}
</style>
<title>Document</title>
</head>
<body>
<div class="default-d"></div>
<div class="con">
<input type="text" class="user" placeholder="请输入用户名">
<input type="password" class="pass" placeholder="请输入密码">
<button type="button" class="submit">注册</button>
</div>
<div class="container">
<div class="title">
哈哈哈哈哈通知更新
</div>
<div class="con1">哈哈哈哈哈哈帐号是用于访问所有哈哈哈哈哈哈服务的帐号，请您在使用前仔细阅读以下内容：</div>
<div class="con1">在您使用过程中本应用可能需要收集、使用您的下列信息：</div>
<div class="con1-item">*您注册哈哈哈哈哈哈帐号时提供的信息：手机号或邮件地址、帐号密码；</div>
<div class="con1-item">网络信息：IP地址；</div>
<div class="con1">上述数据将会传输并保存至中华人民共和国境内的服务器。</div>
<div class="con1">如果您不同意我们采集上述信息，我们可能无法为您提供完整的服务，您可以退出或注销哈哈哈哈哈哈帐号以终止以上数据或功能的收集与处理。</div>
<div class="con2">
点击
<span>"同意"</span>
，即表示您同意上述内容及
<a href="one.html">哈哈哈哈哈哈帐号用户协议</a>
</div>
<div class="con-a">
<a href="javascript:void(0)" class="back">取消</a>
<a href="javascript:void(0)" class="go">确认</a>
</div>
</div>
</body>
</html>