平时浏览网站的时候经常会遇到点击某些按钮会弹出登录提醒或者留心事项提示的弹窗。那么这种弹窗是怎么实现的呢。实现措施有很多，不外乎就是点击事件触发相应的弹窗事件。
在这里介绍一个简易实现的方法。
首先，这里的弹窗长这样：
而原本页面长这样：
这里假设图中深绿色的按钮作为触发弹窗事件的按钮，在这里命名为btn1，而后就是弹窗的制造：
由图可看出，弹窗是基于全体屏幕的，有个灰色背景遮罩，旁边有一块白色底带有图标文字说明的内容提示区，下面还有两个按钮，close是关闭弹窗的作用。理解了这些，就开始制作弹窗了：
1、html结构如下：
css格式如下：.tc{
width:100%;
height:100%;
position:fixed;
left:0;
top:0,深圳网站制作通俗的来说就是网站通过页面结构定位，合理布局，图片文字处理，程序设计，数据库设计等一系列工作的总和，也是将网站设计师的图片用HTML（标准通用标记语言下的一个应用）方式展示出来;
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:070px;
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 。
<script>
$('.btn1').on('click',function(){
$('.tc').show();
})
</script>
这样就写好之后点击 btn1 就能显示弹窗了，当初弹窗浮现的后果有了，那么点击close关闭弹窗的效果也就不远了
<script>
$('.tc.btn2').on('click',function(){
$('.tc').hide(),深圳网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。不同领域的网页设计，网页图形设计，界面设计，创作，其中包括标准化的代码和专有软件，用户体验设计和搜索引擎优化;
})
</script>
在这里把close 的类名命名为 btn2， 如上代码就实现了点击close按钮封闭弹窗的功能。
将这两个事件放在一起，节省一个script，也显得美观些就是这样
<script>
$('.btn1').on('click',function(){
$('.tc').show();
})
$('.tc.btn2').on('click',function(){
$('.tc').hide();
})
</script>
到这里一个倡导的点击弹窗关闭的成果就实现了。https://www.szfangwei.cn/
