189 8069 5689
通过jquery的show()和hide()函数联合使用，实现弹出窗口。
西固网站建设公司成都创新互联公司,西固网站设计制作，有大型网站制作公司丰富经验。已为西固数千家提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的西固做网站的公司定做！
一、show（）和hide（）函数解析：
1、show() 方法显示隐藏的被选元素。
注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。
2、hide() 方法隐藏被选元素。
这与 CSS 属性 display:none 类似，但是隐藏的元素不会被完全显示（不再影响页面的布局）。
二、设计一个HTML页面，包括一个简单的弹出窗，和一个显示按钮。其中，调用了jquery的以上两个函数。具体代码如下：
三、设计遮罩层的样式，如下：
四、弹出窗口的css样式，代码如下：
五、初始页面如下：
六、点击按钮，查看弹出窗口结果：
七、关闭弹出窗后，打开开发者中心，如下：
写一个fixed定位的div，z-index稍微高一点，设置一下背景色和透明度就行
最普遍的做法遮罩层默认display:none;需要弹出的场景display:block;关闭遮罩层display:none;
第一步：新建一个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遮罩层怎么做