这里假定图中深绿色的按钮作为触发弹窗事件的按钮，在这里命名为btn1，然后就是弹窗的制作：

由图可看出，弹窗是基于整个屏幕的，有个灰色背景遮罩，中间有一块白色底带有图标文字说明的内容提示区，下面还有两个按钮，close是关闭弹窗的作用。了解了这些，就开始制作弹窗了：

background: rgba(0,0,0,.5);

河南网站建设公司价格,品牌型网站建设价格,商城网站建设价格,188金宝搏下载app 建设价格,河南网站设计制作

transform: translate(-50%,-50%);

box-sizing: border-box;

河南网站建设公司价格,品牌型网站建设价格,商城网站建设价格,188金宝搏下载app 建设价格,河南网站设计制作

box-sizing: border-box;

justify-content: center;

margin-top: 48px;

}

background: #1296db;

河南网站建设公司价格,品牌型网站建设价格,商城网站建设价格,188金宝搏下载app 建设价格,河南网站设计制作

}

.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').on('click',function(){

$('.tc').show();

})

这样就写好之后点击 btn1 就能显示弹窗了，现在弹窗出现的效果有了，那么点击close关闭弹窗的效果也就不远了

河南网站建设公司价格,品牌型网站建设价格,商城网站建设价格,188金宝搏下载app 建设价格,河南网站设计制作

$('.tc .btn2').on('click',function(){

$('.tc').hide();

})

在这里把close 的类名命名为 btn2， 如上代码就实现了点击close按钮关闭弹窗的功能。

将这两个事件放在一起，节省一个script，也显得美观些就是这样

$('.btn1').on('click',function(){

$('.tc').show();

})

$('.tc .btn2').on('click',function(){

$('.tc').hide();

})

到这里一个建议的点击弹窗关闭的效果就实现了。

河南新科技网络网络科技有限公司，专注于互联网+品牌整合营销，公司拥有专业的互联网管理、运营策划、UI设计、技术开发等团队，专业从事于工业互联网的开发建设。我司拥有成熟的网络技术开发团队，针对网站开发、技术服务、网站风格定位、网站功能优化、网站推广维护等都具备很强的专业技术水平，旨在为客户提供专业的互联网应用解决方案。公司始终秉持着诚信经营、质量为先的经营理念，我们不仅提供优质的网络技术和云端供应链服务，而且还在产品的选择、应用等方面提供专业的咨询与售后服务。

站内文章：均为188bet博彩体育app下载方式 各部门原创内容如需转载请著名本文网站链接：//www.mcissock.com/new/31209.html未经允许转载要受法律责任,如需转载请联系269247937@qq.com

[网站建设：关于自制网页简易点击弹窗效果]