点击链接弹出图片 - JS笔记

点击链接弹出图片

点击链接弹出图片 - JS笔记

代码

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

    #light_weixin img {
        max-width: 443px;
        height: auto;
    }
</style>

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

<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)">图片二</a></div>
</div>
<div id="light_qq" class="white_content">
    <img src='https://n.getimg.net/www/2018/07/332189.jpg' />
</div>
<div id="light_weixin" class="white_content">
    <img src='https://n.getimg.net/www/2020/10/screenshot.png' />
</div>
<div id="fade" class="black_overlay" onClick="closeWindow()">
</div>

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
登陆后免费下载登录 小黑屋反思中,不准下载! 请先登陆登录 评论后刷新页面下载评论 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限

人已赞赏
js

JS刷新页面实现随机背景图功能 - JS笔记

2020-11-5 19:27:12

js

滑动添加和移除class标记 - JS笔记

2020-12-16 21:56:20

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索