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

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

# ZMKI VLOG: VLOG.ZMKI.CN

效果如下:%title插图%num

#代码

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>

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>

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>

 

给TA买糖
共{{data.count}}人
人已赞赏
WordpressWordPress优化WordPress插件wordpress美化前端

wordpress接入QQ等社交登录插件[QQWorld通行证]钻芒二开美化版

2019-6-16 20:37:38

WordpressWordPress优化前端后端网站源码网络资源

PHP实现旧域名自动跳转新域名带参数自适应页面-WordPress换域名

2019-7-4 15:40:51

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧