点击文字显示图片

1、HTML代码

<div class="sq_left">
<p class="phover">

<a href="javascript:void(0)"
onclick="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)"
onclick="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;
}