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ブロック内の 2 つの関数に変換して、管理しやすく読みやすくしました。

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