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

1
<style type="text/css">
2
    .black_overlay {
3
        display: none;
4
        position: absolute;
5
        top: 0%;
6
        left: 0%;
7
        width: 100%;
8
        height: 100%;
9
        /*background-color: #00C0A5;*/
10
        z-index: 1001;
11
        -moz-opacity: 0.8;
12
        opacity: .80;
13
        filter: alpha(opacity=50);
14
    }
15

16
    .white_content {
17
        border-radius: 20px;
18
        display: none;
19
        position: absolute;
20
        top: 30%;
21
        left: 40%;
22
        background-color: #FFFFFF;
23
        z-index: 1002;
24
        /* 数字的大小指明了div的相对层，数字大的在上层 */
25
        overflow: auto;
26
    }
27

28
    #light_weixin img {
29
        max-width: 443px;
30
        height: auto;
31
    }
32
</style>
33

34
<script type="text/javascript">
35
    function openWindow(obj) {
36
        var qq_or_weixin = "light_qq";
37
        switch (obj.id) {
38
            case 'contact_weixin':
39
                qq_or_weixin = "light_weixin";
40
                break;
41

42
            case 'contact_qq':
43
                qq_or_weixin = "light_qq";
44
                break;
45
        }
46
        document.getElementById(qq_or_weixin).style.display = 'block';
47
        document.getElementById('fade').style.display = 'block';
48
    }
49
    function closeWindow() {
50
        document.getElementById('light_weixin').style.display = 'none';
51
        document.getElementById('light_qq').style.display = 'none';
52
        document.getElementById('fade').style.display = 'none';
53
    }
54
</script>
55

56
<div class="top_contact_us">
57
    <div class="top_telphone"></div>
58
    <div class="top_weixin"><a href="#" id="contact_weixin" onclick="openWindow(this)">图片一</a></div>
59
    <div class="top_qq"><a href="#" id="contact_qq" onclick="openWindow(this)">图片二</a></div>
60
</div>
61
<div id="light_qq" class="white_content">
62
    <img src='https://n.getimg.net/www/2018/07/332189.jpg' />
63
</div>
64
<div id="light_weixin" class="white_content">
65
    <img src='https://n.getimg.net/www/2020/10/screenshot.png' />
66
</div>
67
<div id="fade" class="black_overlay" onClick="closeWindow()">
68
</div>