首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

《小白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框,点击确定以后可以对页面或者数据库数据进行修改。”

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171219A02WFQ00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券