点击文字显示图片

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;
}