51La
永兴集团(中国区)官方网站-Macau App Station
首 页
永兴集团导航入口
网站案例
网站建设
小程序开发
解决方案
永兴集团官网
联系方维
400-800-9385
关于自制网页简易点击弹窗效果
发表日期:2020-04-21 10:09:27 作者来源:文庆 浏览:3690 标签:
当前位置:
首页
-
永兴集团官网
-
网站建设
平时浏览网站的时候经常会遇到点击某些按钮会弹出登录提示或者注意事项提示的弹窗。那么这种弹窗是怎么实现的呢。实现方法有很多,不外乎就是点击事件触发相应的弹窗事件。
在这里介绍一个简易实现的方法。
首先,这里的弹窗长这样:
而原本页面长这样:
这里假定图中深绿色的按钮作为触发弹窗事件的按钮,在这里命名为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,也显得美观些就是这样
到这里一个建议的点击弹窗关闭的效果就实现了。
如没特殊注明,文章均为永兴集团原创,转载请注明来自/news/5636.html
上一篇:
【签约】惠州市红链科技有限公司钻石网站建设项目
下一篇:
slideDown()和slideUp()方法和css3过渡的下拉菜单效果
相关网站设计案例
中特威科技
哲商集团
医疗器械创新网
相关资讯
高端定制视角:本地网页制作的创新路...
日期:2025-07-12 浏览:79
上海网站设计风向标,2025网页设计...
日期:2025-07-11 浏览:138
永兴集团提供单独网页前端制作服务
日期:2025-06-16 浏览:127
常见问题
企业网站建设常见问题整理合集【置顶】
在深圳建设一个公司网站多少钱
开发网站需要多久跟这九个因素有关
最新文章
高端网站建设过程中的六大误区
浏览量:2952
网站太慢?尝试如下方式提速!
浏览量:3228
新旧两个网站并存产生的问题以及解决办法
浏览量:4761
从上门到上手,简单介绍下宝塔面...
浏览量:5657
抗“疫”战中的“危”“机”
浏览量:3804
检测行业小程序定制开发
浏览量:3746
400-800-9385
回到顶部
XML 地图
0
请您留言
非常抱歉,客服不在线,麻烦留下您的联系电话或者微信,我们看到后会马上联系您!
提交
感谢留言
我们会尽快与您联系
关闭