Question

在我的一个项目中，我要求在同一页面上有多个弹出式div。这意味着当用户点击链接时，某些内容应该在弹出窗口中打开。他们自己的弹出窗口会有很多这样的链接。由于对javascript知之甚少，我试图为它编写一个javascript，但它只适用于一个弹出窗口。当我点击第二个，第三个...链接时，只有第一个弹出窗口打开而不是打开第二个，第三个...弹出窗口。这是我的代码。请告诉它的修改。

<!DOCTYPE html>
<html > 
    <head> 
        <script>
        window.document.onkeydown = function (e)
        {
            if (!e)
            {
                e = event;
            }
            if (e.keyCode == 27)
            {
                lightbox_close();
            }
        }

        function lightbox_open()
        {
            window.scrollTo(0,0);
            document.getElementById('light').style.display='block';
            document.getElementById('fade').style.display='block';  
        }

        function lightbox_close()
        {
            document.getElementById('light').style.display='none';
            document.getElementById('fade').style.display='none';
        }
    </script>

    <style>
        #fade
        {
            display: none;
            position: fixed;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: #000;
            z-index:1001;
            -moz-opacity: 0.7;
            opacity:.70;
            filter: alpha(opacity=70);
        }
        #light
        {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300px;
            height: 200px;
            margin-left: -150px;
            margin-top: -100px;                 
            padding: 10px;
            border: 2px solid #FFF;
            background: #CCC;
            z-index:1002;
            overflow:visible;
        }
    </style> 
</head> 
<body> 
    <a href="#" onclick="lightbox_open();">Open 1</a>
    <div id="light">div 1</div>
    <div id="fade" onClick="lightbox_close();"></div> 

    <a href="#" onclick="lightbox_open();">Open 2</a>
    <div id="light">div 2</div>
    <div id="fade" onClick="lightbox_close();"></div> 

    <a href="#" onclick="lightbox_open();">Open 3</a>
    <div id="light">div 3</div>
    <div id="fade" onClick="lightbox_close();"></div> 
</body>
</html>

Answer 1

这是实现您想要的方式。我确信它可以改进，但那取决于你。

首先，IDs在整个页面中应该是唯一的。如果您想分组元素，请改为为他们提供共享class。

根据更改，您的HTML将如下所示：

<a href="#" class="lightbox" onclick="lightbox_open(this)">Open 1</a>
<div class="light">div 1</div>
<div class="fade" onClick="lightbox_close()"></div>

<a href="#" class="lightbox" onclick="lightbox_open(this)">Open 2</a>
<div class="light">div 2</div>
<div class="fade" onClick="lightbox_close()"></div>

<a href="#" class="lightbox" onclick="lightbox_open(this)">Open 3</a>
<div class="light">div 3</div>
<div class="fade" onClick="lightbox_close()"></div>

您的CSS：

html, body {
    width: 100%;
    height: 100%;
}
.fade {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index:1001;
    -moz-opacity: 0.7;
    opacity:.70;
    filter: alpha(opacity=70);
}
.light {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 200px;
    margin-left: -150px;
    margin-top: -100px;
    padding: 10px;
    border: 2px solid #FFF;
    background: #CCC;
    z-index:1002;
    overflow:visible;
}

您的Javascript：

window.document.onkeydown = function (e) {
    if (!e) {
        e = event;
    }

    if (e.keyCode == 27) {
        lightbox_close();
    }
}

// Note that the function is receiving the clicked element reference.
function lightbox_open(el) {        
    window.scrollTo(0,0);

    // All the anchors that have a class lightbox.
    var anchors = document.querySelectorAll('a.lightbox');
    // All the elements with class light.
    var light = document.querySelectorAll('.light');
    // All the elements with class fade.
    var fade = document.querySelectorAll('.fade');

    // Iterate over the anchors elements.
    for (var i = 0; i < anchors.length; i++) {
        // If the anchor matches the clicked one.
        if (anchors[i] == el) {
            // Look for the light and fade with the same index
            // and display them.
            light[i].style.display = 'block';
            fade[i].style.display = 'block';
        }
    }
}

function lightbox_close() {
    // All the elements with class light or fade.
    var els = document.querySelectorAll('.light, .fade');

    // Loop through the list.
    for (var i = 0; i < els.length; i++) {
        // Hide them.
        els[i].style.display = 'none';
    }
}

Demo

多个弹出式div在同一页面中

1 个答案: