点击文字显示图片

来源：互联网发布：坏男人网络征婚记编辑：程序博客网时间：2024/05/16 11:10

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

0 0