前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >DIV+JS+CSS实现点击弹出图片效果

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代码

代码语言:javascript
复制
<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代码

代码语言:javascript
复制
<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代码

代码语言:javascript
复制
<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 删除。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ZMKI VLOG: VLOG.ZMKI.CN
    • #代码
      • CSS代码
        • js代码
          • HTML代码
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档