首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >《小白HTML5成长之路31》半透明背景的自定义弹窗是怎么用CSS布局的

《小白HTML5成长之路31》半透明背景的自定义弹窗是怎么用CSS布局的

作者头像
企鹅号小编
发布2018-02-12 10:13:10
1.9K0
发布2018-02-12 10:13:10
举报
文章被收录于专栏:企鹅号快讯企鹅号快讯

北方的冬天最怕有风,空气虽然好了,但是异常的冷,吸几口冷风感觉肺都结了冰。一大早小白来到办公室琢磨用户交互方面的问题,看了几个网站发现很多网站的弹窗都是自定义的,而且还把弹窗周围的区域做成了半透明状,看上去非常不错。于是小白也准备自己通过css布局一个弹窗试试,一来以后肯定会用上这个功能,二来熟悉一下最近掌握的CSS+HTML布局。

说干就干,小白打开webStrom做起了弹窗的布局。他首先用一个容器layer作为弹窗的容器,然后里面放了窗口容器(dialog),窗口容器里面还包含了三个子容器,分别是标题(layerTitle)、内容区域(layerContent)、按钮区域(layerBTContainer)。

小白想:“layer要充满并遮挡整个浏览器窗口,而且滚动页面它还得一直保持遮挡的状态,把它设置为浮动类型(position:fixed)的容器最合适。里面的dialog需要保持在浏览器的最中心位置,因此最好把dialog设置成固定宽度和高度,这样可以很好的实现居中。”,于是小白先把layer和dialog以及dialog内部的容器设定了一个初步的CSS样式。

layer的position设置为fixed,上下左右距离都设置成0,就可以达到占用整个窗口。里面的dialog容器小白根据刚学习的CSS溢出法让dialog上下都居中。dialog如果是绝对定位,设置上下左右距离都为0它会占用整个父容器区域,但是如果CSS中限制了dialog的宽和高并且设置了marin为auto,它就会基于父容器居中

为了测试transition属性,小白还把确定按钮上面设置了一个鼠标移上去以后渐变的效果,做完以后就是这个样子:

看到布局好的弹窗小白心里非常高兴,突然他想到一个问题,这个弹窗背景还没设置半透明,于是赶紧往layer上增加了opacity:0.5这个半透明属性,小白满怀信息的刷新了页面,当看到结果时小白发现背景和窗口都变成了半透明。

正好这时老朱从小白身边经过,随口跟小白说了一句:“小白,你是不是把窗口的父容器设置成半透明了?”

“是啊!父容器背景是黑色,所以我把父容器设置成了半透明!”

“可是父容器设置半透明会对他的子元素产生影响啊,这样会导致它里面的所有元素都变成半透明,你为啥不给窗口添加一个兄弟容器来实现这个效果呢?”

小白仔细想了想,说道:“哦!我明白了,我可以在layer容器里面放一个跟layer一样大的容器,这样就不会冲突了,我再试试!”

不一会小白找到老朱,说道:“我改好了,现在我给dialog添加了一个layerbg容器作为背景层,然后把layer之前的背景色和透明度去掉,放到了新增加的背景层上面,背景层高和宽与layer一样所以这样就不会把dialog也变成半透明了。你看看效果。”

老朱说:“嗯!不错,你现在通过HTML和CSS布局的这个弹窗还能做很多完善,比如出现弹窗时增加一个动画效果、给它添加一个关闭按钮或者取消按钮等等。除了提示功能以外,你现在做的这个还能再进行深入修改,把它变成可以输入文字的prompt框,点击确定以后可以对页面或者数据库数据进行修改。”

本文来自企鹅号 - 无名码农媒体

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文来自企鹅号 - 无名码农媒体

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档