一样泛泛平常浏览网站的时辰经常会遇到点击某些按钮会弹出登录提示或留神事项提示的弹窗。那末这类弹窗是如何完成的呢。完成办法有很多，不外乎就是点击事件触发响应的弹窗事件。
在这里引见一个简略单纯完成的办法。
起首，这里的弹窗长如许：
而本来页面长如许：
这里假定图中深绿色的按钮作为触发弹窗事件的按钮，在这里定名为btn1，然后就是弹窗的建筑：
由图可看出，弹窗是基于全部屏幕的，有个灰色配景遮罩，
营销型网页设计，中心有一块红色底带有图标笔墨说明的内容提示区，下面另有两个按钮，close是封锁弹窗的感化。晓得了这些，就初步建筑弹窗了：
1、html机关以下：
- css格式以下：
.tc{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 9;
background: rgba(0,0,0,.5);
display: none;
}
.tc .box{
width: 670px;
height: 404px;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
box-sizing: border-box;
padding-top: 54px;
}
.tc .box .icon{
width: 110px;
height: 110px;
margin: auto;
}
.tc .box .t1{
font-size: 18px;
line-height: 28px;
color: #333;
text-align: center;
box-sizing: border-box;
padding: 0 70px;
margin-top: 38px;
}
.tc .box .t2{
display: flex;
justify-content: center;
margin-top: 48px;
}
.tc .box .t2 .btn1{
width: 195px;
height: 40px;
border: none;
background: #1296db;
color: #fff;
font-size: 18px;
display: block;
cursor: pointer;
}
.tc .box .t2 .btn2{
width: 128px;
height: 40px;
border: none;
background: #295965;
color: #fff;
font-size: 18px;
display: block;
margin-left: 16px;
cursor: pointer;
}
因为在全部弹窗的父级div里加了暗藏属性：display:none; 以是在页面上是看不到弹窗的，这个时辰就要初步写触发弹窗的点击事件了，下面假定的按钮是btn1，弹窗这块的父级div是 tc 。
如许就写好以后点击 btn1 就能浮现弹窗了，此刻弹窗出现的成就有了，那末点击close封锁弹窗的成就也就不远了
在这里把close 的类名定名为 btn2， 如上代码就完成了点击close按钮封锁弹窗的功用。
将这两个事件放在一起，节流一个script，也显得美妙些就是如许
到这里一个创议的点击弹窗封锁的成就就完成了。
