html5如何实现弹出提示框,并且伴随遮罩层并且可以关闭弹出框 |
您所在的位置:网站首页 › js弹出警告框的方法 › html5如何实现弹出提示框,并且伴随遮罩层并且可以关闭弹出框 |
通过jquery的show()和hide()函数联合使用,实现弹出窗口。 一、show()和hide()函数解析: 1、show() 方法显示隐藏的被选元素。 注意:show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素)。 2、hide() 方法隐藏被选元素。 这与 CSS 属性 display:none 类似,但是隐藏的元素不会被完全显示(不再影响页面的布局)。 二、设计一个HTML页面,包括一个简单的弹出窗,和一个显示按钮。其中,调用了jquery的以上两个函数。具体代码如下: 三、设计遮罩层的样式,如下: 四、弹出窗口的css样式,代码如下: 五、初始页面如下: 六、点击按钮,查看弹出窗口结果: 七、关闭弹出窗后,打开开发者中心,如下: 第一步:新建一个html页面页面中先做出一个【领红包】的按钮,如图(图中左侧是效果右侧是代码),点击这个按钮就会弹出一个红包的活动消息,即我们要的遮罩效果 css遮罩层怎么做 css遮罩层怎么做 第二步:做出遮罩层 遮罩层的作用就是将层后面的内容都遮住,覆盖全屏,所以: 宽高都设为:100%; 位置 position:absolute;left:0; top:0 背景色 一般都设为透明的 background: rgba(0,0,0,0.5) 层的顺序 z-index:100 (设置一个比较大的数值) css遮罩层怎么做 第三步:做出遮罩层上的内容 1、在遮罩层上添加活动效果图 2、关闭活动信息弹出框的【关闭】按钮 注意:遮罩层上的内容也要添加上z-index且数值要比遮罩层的大,z-index:101 如图(左侧效果,右侧代码) css遮罩层怎么做 css遮罩层怎么做 第四步:用js实现遮罩效果演示 首先我们看到的页面上是没有遮罩层的,只有一个【领红包】的按钮在页面中; 然后我们点就【领红包】按钮,就弹出遮罩效果;再要关闭遮罩层时点击右上角的关闭按钮,就退出了遮罩成的活动信息。具体操作如下: 1、将遮罩层隐藏起来 display:none; 2、点击【领红包】时,遮罩层显示 display:block 3、点击关闭按钮,遮罩层消失 display:none; 如图 css遮罩层怎么做 css遮罩层怎么做 css遮罩层怎么做 css遮罩层怎么做 css遮罩层怎么做 所谓的毛玻璃效果其实是半透明+模糊,可以用CSS filter实现。时间不多,就抛个砖,题主可以自己找一下文档和更多案例。 filter - CSS div { -moz-filter: blur(5px) -webkit-filter: blur(5px) -o-filter: blur(5px) -ms-filter: blur(5px) filter: blur(5px) } 大体思路是,当出现弹出层的时候,对背景层增加blur filter,再给弹出层的一定透明度就可以了。 因为有同学坚持说 CSS filter 只能用于图片,所以录了一个小视频,证明它是可以用于可视的DOM元素的。 在 codepen 上找了一个栗子,是通过CSS filter + JS复制滚动元素实现的毛玻璃 Nav Bar 效果,也可以说明,这个属性真的不是只能作用于图片,也不需要“截屏”啊。 欢迎分享,转载请注明来源:内存溢出 原文地址:https://outofmemory.cn/zaji/5934562.html |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |