0

我想在最低级别（并且没有外部 .js 文件）创建一个带有 javascript 的灯箱。我对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

4

2 回答 2

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/

于 2012-10-19T18:05:51.663 回答
0

当您不熟悉 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>

但是，如果您想四处移动面板或有很多面板，那将不是一个很好的解决方案。您可以将所有弹出窗口存储在一个数组中，并使用该数组来显示和隐藏您想要的弹出窗口。或者，您可以做很多灯箱插件所做的事情，将您的弹出 div 放在某个地方，隐藏，当您想要查看面板时，将面板的 HTML 替换为弹出窗口 HTML 并简单地显示面板和覆盖。使用innerHTML你可以很容易地做到这一点。

于 2012-10-19T18:06:27.453 回答