點擊鏈接彈出圖片 – 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>