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

北方的冬天最怕有风,空气虽然好了,但是异常的冷,吸几口冷风感觉肺都结了冰。一大早小白来到办公室琢磨用户交互方面的问题,看了几个网站发现很多网站的弹窗都是自定义的,而且还把弹窗周围的区域做成了半透明状,看上去非常不错。于是小白也准备自己通过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框,点击确定以后可以对页面或者数据库数据进行修改。”

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我就是马云飞

仿bilibili刷新按钮的实现

简述 最近跟小伙伴一起讨论了一下,决定一起仿一个BiliBili的app(包括android端和iOS端),我们并没有打算把这个项目完全做完,毕竟我们的重点是掌...

2478
来自专栏前端知识分享

第4天:JS入门-给div设置宽高背景色

今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高、背景色。一点点都是进步。核心代码如下:

951
来自专栏Android先生

android自定义view(自定义数字键盘)

至此,我们写的差不多了,然后就是要提供一个接口,对外开放,方便用的时候调用,获取到数字或者其他信息:

1712
来自专栏阮一峰的网络日志

Flexbox 布局的最简单表单

弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了。

1002
来自专栏一“技”之长

iOS UIProgressView控件用法

- (instancetype)initWithProgressViewStyle:(UIProgressViewStyle)style;

1022
来自专栏极乐技术社区

wxss学习《四》字体,组件及API的思维导图

一:字体 一.字体:font。设置对象的文本特性。 1.font-style:文字样式。 取值:normal 正常的字体, italic 斜体字, o...

20810
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何快速实现快递信息流的效果

设置NodeViewItem背景色的透明度,将该属性设置为“0”,即背景全透明,如图2;

1352
来自专栏九彩拼盘的叨叨叨

学习前端 第4周 第1天

793
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之overflow

1、Overflow基本属性   overflow:visible(默认)/hidden/scroll/auto/inherit;   visible:超出部分...

3505
来自专栏跟着阿笨一起玩NET

利用vertical-align:middle实现在整个页面居中

如果想让一个div或一张图片相对于整个页面居中,用vertical-align:middle可以很简单地解决。

1461

扫码关注云+社区

领取腾讯云代金券