0

最小レベルの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;}

Ok。別のリンクをクリックして別のパネルを表示すると、前にロードされた最後のパネルがロードされることを除いて、すべてが正常に機能しています。これは問題のスクリーンショットです：

ここに画像の説明を入力してください

そこで、この問題を修正したいと思います。可能であれば、<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 に答える