专栏首页企鹅号快讯《小白HTML5成长之路31》半透明背景的自定义弹窗是怎么用CSS布局的

《小白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 条评论
登录 后参与评论

相关文章

  • 如何实现敏感无线系统安全?

    2014年8月,美国国土安全部(以下简称“DHS”)首席信息安全官办公室发布了DHS 4300A-Q1(敏感系统手册)文件。文件仅针对敏感无线系统的安全问题,不...

    企鹅号小编
  • 美媒盘点2018年将改变世界的四大技术趋势,你猜对了吗?

    原标题:美媒盘点2018年将改变世界的四大技术趋势 参考消息网12月30日报道美国《财富》杂志网站12月26日刊登了《2018年将改变世界的四大技术趋势》一文,...

    企鹅号小编
  • 全球AI新闻创新实践系列③:华邮、雅虎、美联社、Quartz怎么干!

    MediaPlus关于人工智能在新闻界的探索还在进行,本周将继续为大家带来几个业界内先锋的案例。他们分别是华盛顿邮报、雅虎体育和美联社的自动新闻写作,以及新闻媒...

    企鹅号小编
  • centos永久修改时间

    修改硬件时间 hwclock --set --date "2019-08-12 10:18:30"

    似水的流年
  • date函数和日期有关

    tring date($format[,$timestamp]),[]内的可以使用strtotime输出指定日期

    十月梦想
  • 腾讯云服务器价格,腾讯云价格怎么查?

    许多用户购买腾讯云服务器之前都想先查询下腾讯云服务器价格表,其实腾讯云有专门的价格计算器,只是很多用户没有注意到而已,腾讯云服务器价格通过价格计算器查询下就知道...

    tengxunyun8点com
  • 消息中间件知识点速查

    消息中间件的必要性 传统的用法 ? 如果每增加一个服务就要修改登陆系统里的调用的话,非常的麻烦而不具备扩展性 ? 通过消息中间件解耦,新拓展的功能就只需要订阅登...

    linxinzhe
  • 美国人的简易衣架为什么需要工业机器人来做?

    如今,一家制造这样简易衣架的工厂,也用上工业机器人了。这个故事听来很欢乐,但当你读完后,你一定会被故事里的这家工厂深深打动。 说到这看似毫无技术含量的简易衣架...

    机器人网
  • 结合 Vue 源码谈谈发布-订阅模式

    最近的工作学习中接触到了发布-订阅模式。该思想编程中的应用也是很广泛的, 例如在 Vue中也大量使用了该设计模式,所以会结合Vue的源码和大家谈谈自己粗浅的理解...

    用户2356368
  • NodeJs中的express框架获取http参数

    蛋未明

扫码关注云+社区

领取腾讯云代金券