DIV+JS+CSS实现点击弹出图片效果

AlexTao

修改于 2023-05-16 15:12:22

26.2K0

修改于 2023-05-16 15:12:22

文章被收录于专栏：钻芒博客

前几天扒了vue vlog的官网，想给添加一个像博客一样的点击微信图标弹出公众号二维码。

ZMKI VLOG: VLOG.ZMKI.CN

效果如下:

#代码

CSS代码

<style type="text/css">
      .black_overlay {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: #00C0A5;
	z-index: 1001;
	-moz-opacity: 0.8;
	opacity: .80;
	filter: alpha(opacity=50);
}

.white_content {
	border-radius: 20px;
	display: none;
	position: absolute;
	top: 30%;
	left: 40%;
	background-color: #FFFFFF;
	z-index: 1002;
 /* 数字的大小指明了div的相对层，数字大的在上层 */
	overflow: auto;
}  
</style>

Select Code

Copy

js代码

<script  type="text/javascript">
    function openWindow(obj){
        var qq_or_weixin = "light_qq";
        switch(obj.id)
        {
            case 'contact_weixin':
            qq_or_weixin = "light_weixin";
            break;
            
            case 'contact_qq':
            qq_or_weixin = "light_qq";
            break;
        }
        document.getElementById(qq_or_weixin).style.display='block';
        document.getElementById('fade').style.display='block';
    }
    function closeWindow(){
        document.getElementById('light_weixin').style.display='none';
        document.getElementById('light_qq').style.display='none';
        document.getElementById('fade').style.display='none';
    }
</script>

Select Code

Copy

HTML代码

<div class="top_contact_us">
    <div class="top_telphone"></div>
    <div class="top_weixin"><a href="#" id="contact_weixin" onclick="openWindow(this)">微信公众号</a></div>  
    <div class="top_qq"><a href="#" id="contact_qq" onclick="openWindow(this)">官方QQ群</a></div>  
</div>
<div id="light_qq" class="white_content"> 
    <img src='img/qq_erweima.png' />  
</div>
<div id="light_weixin" class="white_content">  
    <img src='img/weixin_erweima.png' />  
</div>
<div id="fade" class="black_overlay"  onClick="closeWindow()">
</div>

Select Code

Copy

本文源自钻芒博客

https://www.zmki.cn/3582.html

本文系转载，如有侵权，请联系 cloudcommunity@tencent.com 删除。

编程算法