1、HTML代码
<div class="sq_left">
<p class="phover">
<a href="javascript:void(0)"
οnclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<span style="" class="ahover">点击这里</span></a>
</p>
<div id="light" class="white_content">
关注我们 <a href="javascript:void(0)"
οnclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"
style="float: right ;color:red;">关闭</a> <img src="/images/qrcode.jpg" alt=""
width="190px" height="190px">
</div>
<div id="fade" class="black_overlay"></div>
</div>
2、css
.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.3;
opacity:.30;
filter: alpha(opacity=88);
}
.white_content {
text-align: center;
display: none;
position: absolute;
top: -4%;
left: 32%;
width: 230px;
height: 230px;
padding: 10px;
background-color:white;
z-index: 1002;
overflow: auto;
}
.ahover{
color: red;
cursor: pointer;
}
.phover a:hover {
text-decoration: NONE;
}