通过jquery的show()和hide()函数联合使用,实现弹出窗口。
一、show()和hide()函数解析:
1、show() 方法显示隐藏的被选元素。
注意:show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素)。
2、hide() 方法隐藏被选元素。
这与 CSS 属性 display:none 类似,但是隐藏的元素不会被完全显示(不再影响页面的布局)。
二、设计一个HTML页面,包括一个简单的弹出窗,和一个显示按钮。其中,调用了jquery的以上两个函数。具体代码如下:
三、设计遮罩层的样式,如下:
四、弹出窗口的css样式,代码如下:
五、初始页面如下:
六、点击按钮,查看弹出窗口结果:
七、关闭弹出窗后,打开开发者中心,如下:
在很多网页中我们会看到在一个图片上面有一个半透明的色块,上面写有信息介绍,这个东西叫做蒙版,或者是遮罩。那么这个蒙版是怎么实现的呢。。。
我们看下面这段代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>蒙版||遮罩</title>
<style>
.box1 {
width: 830px
height: 470px
border: 1px solid #000
position: relative
overflow: hidden
}
.mengban{
width: 100%
height: 200px
background-color: rgba(255,0,0,.5)
position: absolute
bottom: 0
transition: all linear 1s
}
.box1:hover .mengban{
bottom: -200px
}
</style>
</head>
<body>
<div class="box1">
<img src="img/watchingU.jpg" alt="pic"/>
<div class="mmengban>XX东西 XX钱...</div>
</div>
</body>
</html>
上面的代码就是写蒙版的方式,这个只是下面的蒙版,如果要完成上下左右的蒙版都是一样的,只是定位的方向和蒙版的宽高需要自己取调整。
所谓的毛玻璃效果其实是半透明+模糊,可以用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 效果,也可以说明,这个属性真的不是只能作用于图片,也不需要“截屏”啊。