1

DIV をポップアップとして開く JavaScript があります。しかし今、さまざまな DIVS からいくつかの異なるポップアップを開きたいのですが、正しく動作させることができません。

次の JavaScript を使用します。

<script>
window.onload = function()
{
    var show = document.getElementById('show-div');
    var hide = document.getElementById('hide-div');
    var popup = document.getElementById('popup-div');

    show.onclick = function(e)
    {
        popup.style.visibility = 'visible';
        return false;
    }

    hide.onclick = function(e)
    {
        popup.style.visibility = 'hidden';
        return false;
    }
}
</script>

div には次のコードを使用します。

<a id="show-div" href="#">link</a>
<div id="popup-div">
<div id="popup-header">
<div id="popup-title">...Popup title...</div>
<a id="hide-div" href="#">X</a></div>
<div id="popup-body">
<p>This is the content of the div....</p>
</div>
</div>

これは 1 つのリンクで機能しますが、別の DIV ID (および "var popup1 = document.getElementById('popup-div1');" および popup1 onclick イベントなどの関連する var 要素) を使用しても、正しく機能しません。コンテンツを含む独自の DIV をすべて含む複数のリンクで機能させるにはどうすればよいですか。

（私は自分の質問に答えることができないので、これが私がそれを修正した方法です）次のコードで動作させました：

<script>
window.onload = function()
{
    var show = document.getElementById('show-div');
    var show2 = document.getElementById('show-div2');
    var hide = document.getElementById('hide-div');
    var hide2 = document.getElementById('hide-div2');
    var popup = document.getElementById('popup-div');
    var popup2 = document.getElementById('popup-div2');

    show.onclick = function(e)
    {
        popup.style.visibility = 'visible';
        return false;
    }

    show2.onclick = function(e)
    {
        popup2.style.visibility = 'visible';
        return false;
    }

    hide.onclick = function(e)
    {
        popup.style.visibility = 'hidden';
        return false;
    }
    hide2.onclick = function(e)
    {
        popup2.style.visibility = 'hidden';
        return false;
    }
}
</script>

と

<a id="show-div" href="#">link</a>
<div id="popup-div">
<div id="popup-header">
<div id="popup-title">...Popup title...</div>
<a id="hide-div" href="#">X</a></div>
<div id="popup-body">
<p>This is the content of the div....</p>
</div>
</div>
<a id="show-div2" href="#">link2</a>
<div id="popup-div2">
<div id="popup-header">
<div id="popup-title">...Popup title2...</div>
<a id="hide-div2" href="#">X</a></div>
<div id="popup-body">
<p>This is the content of the div2....</p>
</div>
</div>
4

1 に答える 1

0

以下はあなたが望むことだと思います....

デモ

JS コード:

var show = document.getElementById('show-div');
var hides = document.getElementsByClassName('hide-div');
var popups = document.getElementsByClassName("popup-div");

show.onclick = function (e) {
    for (var i = 0; i < popups.length; i++) {
        popups[i].style.visibility = 'visible';
    }
    return false;
}

for (var j = 0; j < hides.length; j++) {
    hides[j].onclick = function (e) {
        this.parentNode.parentNode.style.visibility = 'hidden';
        return false;
    }
}

HTML コード:

<a id="show-div" href="#">Show/Hide</a>

<div id="popup-div" class="popup-div">
    <div id="popup-header">
        <div id="popup-title">...Popup title...</div>
<a id="hide-div" class="hide-div" href="#">X</a>

    </div>
    <div id="popup-body">
        <p>This is the content of the div....</p>
    </div>
</div>
<div id="popup-div" class="popup-div">
    <div id="popup-header">
        <div id="popup-title">...Popup title...</div>
<a id="hide-div" class="hide-div" href="#">X</a>

    </div>
    <div id="popup-body">
        <p>This is the content of the div....</p>
    </div>
</div>
于 2013-10-21T12:49:34.007 に答える