燈箱效果（使用最少的JavaScript）問題

Question

我想使用最低級別的javascript創建一個燈箱（並且沒有外部.js文件）。 我是JS的新手，所以我不知道如何正確解決一些問題。

我有一組畫廊風格的鏈接。 像這個：

<a href = "javascript:void(0)" onclick = "document.getElementById('overlay').style.display='block';document.getElementById('popUpContainer').style.display='block';document.getElementById('post03').style.display='block'" class="box col3" id="pan03"></a>

它以燈箱樣式加載“面板”。 像這些：

 <div id="popUpContainer">
  <div id="popUp">
    <div class="bigPan" id="post01"></div>
    <div class="bigPan" id="post02"></div>
    <div class="bigPan" id="post03"></div>
    <div class="bigPan" id="post04"></div>
    <div class="bigPan" id="post05"></div>
    <div class="bigPan" id="post06"></div>
    <div class="bigPan" id="post07"></div>
    <div class="bigPan" id="post08"></div>
    <div class="bigPan" id="post09"></div>
    <div class="bigPan" id="post10"></div>
    <div class="bigPan" id="post11"></div>
    <div class="bigPan" id="post12"></div>          
  </div>
 </div>

CSS是這樣的：

#overlay {
            width: 100%;
            height: 100%;
            display: none;
            position: fixed;
            background-color: #FFD365;
            z-index: 300;
            opacity: 0.7;

    }

    #close {
            width: 100%;
            height: 100%;
            z-index: 301;
            background-color: black;
    }

    #popUpContainer {
            position: absolute;
            display: none;
            left: 50%;
            top: 135px;
            padding: 0px;
    }

    #popUp {
            width: 800px;
            height: 520px;
            padding: 0px;
            position: relative;
            left: -50%;
            z-index: 400;
    }

    .bigPan {
            margin:0px;
            width: 100%;
            height: 100%;
            border-radius: 5px;
    }

    #post01 {background-color: #F47A44; display: none;}
    #post02 {background-color: #558F26; display: none;}
    #post03 {background-color: #E30613; display: none;}
    #post04 {background-color: #0E84B4; display: none;}
    #post05 {background-color: #4E2583; display: none;}
    #post06 {background-color: #95C11F; display: none;}
    #post07 {background-color: #009FE3; display: none;}
    #post08 {background-color: #D7007F; display: none;}
    #post09 {background-color: #E6332A; display: none;}
    #post10 {background-color: #E29924; display: none;}
    #post11 {background-color: #008D36; display: none;}
    #post12 {background-color: #EB5B93; display: none;}

好。 一切工作正常，除了當我單擊另一個鏈接以顯示另一個面板時，它會加載之前加載的最后一個面板。 這是問題的屏幕截圖：

因此，我想解決這個問題，我想，如果可能的話，我想請您幫助我使用<script>標記和數組來清理代碼。

先感謝您。

這是一個jsFiddle

Answer 1

也許嘗試這樣的事情？：

<script type="text/javascript">
    function showPopup(anchor) {
        console.clear();
        var target = anchor.getAttribute("href").replace("#", "");
        console.log("Anchor clicked to show div with id: " + target);

        document.getElementById("overlay").style.display = "block";
        document.getElementById("popUpContainer").style.display = "block";

        var popup = document.getElementById("popUp");
        var posts = popup.getElementsByTagName("div");

        for (var i = 0; i < posts.length; i++) {
            var post = posts[i];
            if (post.id == target) {
                console.log("div with id: " + post.id + " is being shown");
                post.style.display = "block";
            } else {
                console.log("div with id: " + post.id + " is being hidden");
                post.style.display = "none";
            }
        }
    }
</script>

<a id="pan03" href="#post03" onclick="showPopup(this);return false;">post03</a>

我將嘗試獲取jsFiddle

更新 ：

這是jsFiddle：

http://jsfiddle.net/3jB9p/1/

更新 ：

疊加層自行關閉的代碼：

<a id="overlay" href="#" onclick="closeOverlay(this);return false;"></a>

function closeOverlay(overlay) {
    overlay.style.display = "none";
    document.getElementById("popUpContainer").style.display = "none";
    document.getElementById("bigPan").style.display = "none";
}

更新 ：

這是一個小提琴，可以解決我以前的問題，並清理代碼： http : //jsfiddle.net/eqhRG/2/

Answer 2

當您不熟悉JS時首先要意識到的是，外部javascript文件是您的朋友。 使用外部文件使您可以編寫易於使用和擴展的模塊化可重用代碼。 所以，我首先要問的是為什么您不能使用外部文件？

您遇到的問題似乎是由於您沒有隱藏先前打開的面板而引起的。

您可以將其更改為： <a href = "javascript:void(0)" onclick = "document.getElementById('overlay').style.display='block';document.getElementById('popUpContainer').style.display='block';document.getElementById('post03').style.display='block';;document.getElementById('post02').style.display='none'" class="box col3" id="pan03"></a>

但是，如果您要移動面板或有很多面板，那將不是一個很好的解決方案。 您可以將所有彈出窗口存儲在一個數組中，並使用該數組顯示和隱藏所需的彈出窗口。 或者，您可以執行很多lightbox插件的工作，即將彈出div放置在某個位置，隱藏起來，並且當您想查看面板時，將面板的HTML替換為彈出HTML，然后簡單地顯示面板和覆蓋層。 使用innerHTML您可以非常輕松地做到這一點。