html5中文学习网

您的位置: 首页 > 网页制作 > css教程 » 正文

css弹出层覆盖底层具体实现_CSS教程_CSS_网页制作

[ ] 已经帮助:人解决问题
点评:想实现这样的效果使用css弹出层覆盖底层,经研究,具体实现代码如下,感兴趣的朋友可以参考下

复制代码
代码如下:
x2AHTML5中文学习网 - HTML5先行者学习网
#mcover { x2AHTML5中文学习网 - HTML5先行者学习网
position: fixed; x2AHTML5中文学习网 - HTML5先行者学习网
top: 0; x2AHTML5中文学习网 - HTML5先行者学习网
left: 0; x2AHTML5中文学习网 - HTML5先行者学习网
width: 100%; x2AHTML5中文学习网 - HTML5先行者学习网
height: 100%; x2AHTML5中文学习网 - HTML5先行者学习网
background: rgba(0, 0, 0, 0.7); x2AHTML5中文学习网 - HTML5先行者学习网
display: none; x2AHTML5中文学习网 - HTML5先行者学习网
z-index: 20000; x2AHTML5中文学习网 - HTML5先行者学习网
} x2AHTML5中文学习网 - HTML5先行者学习网
#mcover img { x2AHTML5中文学习网 - HTML5先行者学习网
position: fixed; x2AHTML5中文学习网 - HTML5先行者学习网
right: 18px; x2AHTML5中文学习网 - HTML5先行者学习网
top: 5px; x2AHTML5中文学习网 - HTML5先行者学习网
width: 260px!important; x2AHTML5中文学习网 - HTML5先行者学习网
height: 180px!important; x2AHTML5中文学习网 - HTML5先行者学习网
z-index: 20001; x2AHTML5中文学习网 - HTML5先行者学习网
} x2AHTML5中文学习网 - HTML5先行者学习网
x2AHTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
x2AHTML5中文学习网 - HTML5先行者学习网
<li class="nine"> x2AHTML5中文学习网 - HTML5先行者学习网
<a href="javascript:void(0);" class=""> x2AHTML5中文学习网 - HTML5先行者学习网
<div id="mcover" onclick="document.getElementById('mcover').style.display='';" style="display:none;"> x2AHTML5中文学习网 - HTML5先行者学习网
<img src="../images/guide.png"> x2AHTML5中文学习网 - HTML5先行者学习网
</div> x2AHTML5中文学习网 - HTML5先行者学习网
<div class="war_main_2_1" style="text-align: center;" onclick="document.getElementById('mcover').style.display='block';"> x2AHTML5中文学习网 - HTML5先行者学习网
<div class="war_main_1_1_2"><img src="../images/vip_1.jpg"></div> x2AHTML5中文学习网 - HTML5先行者学习网
</div> x2AHTML5中文学习网 - HTML5先行者学习网
</a> x2AHTML5中文学习网 - HTML5先行者学习网
</li> x2AHTML5中文学习网 - HTML5先行者学习网
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助