javascript - 灯箱、CSS 和 JavaScript

Question

我想在 html 页面上添加 6-7 个透明弹出窗口，我添加 4 到现在 1 和 2 工作正常，当我按下链接时 3 和 4 会弹出但之后如果我想关闭它们，透明背景会消失但中间的窗口仍然存在......我将附上 html 代码和 css（它是一个非常简单的代码，即使这样我也无法弄清楚什么是错的）

我感谢所有的帮助谢谢大家！

非常感谢您回答如何添加代码:)

@CHARSET "ISO-8859-1";

/* This is a style of dim effect onClick on Register or Log in button - it's the transparent background*/
.black_overlay1, .black_overlay2, .black_overlay3, .black_overlay4{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}


/* This is a style for log in and registration form */
.white_box  {
   display: none;
   position: absolute;
   top: 25%;
   left: 25%;
   width: 50%;
   height: 50%;
   padding: 16px;
   border: 5px solid #ffffff;
   background-color: #cee9ad;
   z-index:1002;
   overflow: auto;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
        <title>
            Simple lightBox effect with css and javascript
        </title>

    <link rel="stylesheet" type="text/css" href="style.css" />

    </head>
    <body>
<!-- BUTTONS for LogIn and Register -->

        <a href="javascript:void(0)" onclick = "document.getElementById('light1').style.display='block';document.getElementById('fade').style.display='block'">Energy Efficient</a>

        <a href="javascript:void(0)" onclick = "document.getElementById('light2').style.display='block';document.getElementById('fade').style.display='block'">Cost efficient</a>

        <a href="javascript:void(0)" onclick = "document.getElementById('light3').style.display='block';document.getElementById('fade').style.display='block'">Sustainability &amp; Safety</a>

        <a href="javascript:void(0)" onclick = "document.getElementById('light4').style.display='block';document.getElementById('fade').style.display='block'">Time Saving</a>


<!-- LOG IN FORM - WRITE DOWN HERE -->
        <div id="light1" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px">      
            <p>Energy Efficient</p>
        </div>

        <div id="light2" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px">      
            <p>Cost efficient</p>
        </div>

        <div id="light3" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px">      
            <p>Sustainability &amp; Safety</p>
        </div>

        <div id="light4" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px">      
            <p>Time Saving</p>
        </div>




<!-- Javascript for hidding div with LogIn form and the fade effect with it -->

        <a onclick="document.getElementById('light2').style.display='none';document.getElementById('fade').style.display='none'" href="javascript:void(0)">
            <div id="fade" class="black_overlay1" onclick = "document.getElementById('light1').style.display='none';document.getElementById('fade').style.display='none'">
            </div>
        </a>

        <a onclick="document.getElementById('light2').style.display='none';document.getElementById('fade').style.display='none'" href="javascript:void(0)">
            <div id="fade" class="black_overlay2" onclick = "document.getElementById('light2').style.display='none';document.getElementById('fade').style.display='none'">
            </div>
        </a>

        <a onclick="document.getElementById('light2').style.display='none';document.getElementById('fade').style.display='none'" href="javascript:void(0)">
            <div id="fade" class="black_overlay3" onclick = "document.getElementById('light3').style.display='none';document.getElementById('fade').style.display='none'">
            </div>
        </a>

        <a onclick="document.getElementById('light2').style.display='none';document.getElementById('fade').style.display='none'" href="javascript:void(0)">
            <div id="fade" class="black_overlay4" onclick = "document.getElementById('light4').style.display='none';document.getElementById('fade').style.display='none'">
            </div>
        </a>


<!-- Other content on the page -->

    </body>
</html>

score 0 · Accepted Answer

该错误是由重复的ID属性值引起的，包括传递给getElementById函数的属性值。

这是固定的 HTML 代码。我已将ONCLICK属性中的脚本转换为一个SCRIPT块中的两个函数，以使它们更易于管理和阅读。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
        <title>
            Simple lightBox effect with css and javascript
        </title>

        <link rel="stylesheet" type="text/css" href="style.css" />

        <script>
        function doshow(num) {
            document.getElementById('light'+num).style.display='block';
            document.getElementById('fade'+num).style.display='block';
        }
        function dohide(num) {
            document.getElementById('light'+num).style.display='none';
            document.getElementById('fade'+num).style.display='none';
        }
        </script>

    </head>
    <body>
<!-- BUTTONS for LogIn and Register -->

        <a href="javascript:void(0)" onclick = "doshow(1)">Energy Efficient</a>

        <a href="javascript:void(0)" onclick = "doshow(2)">Cost efficient</a>

        <a href="javascript:void(0)" onclick = "doshow(3)">Sustainability &amp; Safety</a>

        <a href="javascript:void(0)" onclick = "doshow(4)">Time Saving</a>


<!-- LOG IN FORM - WRITE DOWN HERE -->
        <div id="light1" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px">      
            <p>Energy Efficient</p>
        </div>

        <div id="light2" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px">      
            <p>Cost efficient</p>
        </div>

        <div id="light3" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px">      
            <p>Sustainability &amp; Safety</p>
        </div>

        <div id="light4" class="white_box" style="position: absolute; left: 607px; top: 120px; width:630px; height:560px">      
            <p>Time Saving</p>
        </div>


<!-- Javascript for hidding div with LogIn form and the fade effect with it -->

        <a onclick="dohide(1)" href="javascript:void(0)">
            <div id="fade1" class="black_overlay1">
            </div>
        </a>

        <a onclick="dohide(2)" href="javascript:void(0)">
            <div id="fade2" class="black_overlay2">
            </div>
        </a>

        <a onclick="dohide(3)" href="javascript:void(0)">
            <div id="fade3" class="black_overlay3">
            </div>
        </a>

        <a onclick="dohide(4)" href="javascript:void(0)">
            <div id="fade4" class="black_overlay4">
            </div>
        </a>


<!-- Other content on the page -->

    </body>
</html>

javascript - 灯箱、CSS 和 JavaScript

1 回答 1

Related

Reference