点评:想实现这样的效果使用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先行者学习网