在顶部弹出Div？

Question

您好，我有两个弹出式div，当单击主导航时会弹出。 当前，第二个div始终保持在顶部，因此您必须关闭它才能到达第一个div。 这是我的网站的链接，因此您可以看到我在说什么： http : //nshek.com/

当您单击混合媒体然后进行摄影时，没有问题。 但是，我想这样做，以便在打开照片弹出窗口时单击混合媒体，它会显示在顶部。

任何帮助将非常感激。 这是我的导航和弹出窗口的代码。

<ul id="topnav">
<li><a href = "javascript:void(0)" onclick = "document.getElementById('print').style.display='block';document.getElementById('fade').style.display='block'">mixed media/prints</a></li>
    <div id="print" class="white_content">
    <div id="link">
    <b>prints</b>
    <br />-<a href="/photobased.php">photo-based</a>
    <br />-<a href="/silkscreen.php">silkscreen</a>
    <br />-<a href="/relief.php">relief/monoprint</a>
    <br />-<a href="/litho.php">lithography</a>


    <br><b>other mediums</b>
    <br />-<a href="">mixed media</a>
    <br />-<a href="">paintings</a>
    </div>
    <br><br>
    <div id="close"><a href = "javascript:void(0)" onclick = "document.getElementById('print').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
    </div>

<li><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">photography</a></li>
    <div id="light" class="white_content">
    <b>digital photography</b>
    <br /><div id="link">
    -<a href="">list series</a>
    <br />-<a href="/">view all</a>
    </div>
    <br><b>film photography</b>
    <br /><div id="link">
    -<a href="/cafilm.php">california, usa</a>
    <br />-<a href="/hkfilm.php">hong kong</a>
    <br />-<a href="/miscfilm.php">miscellaneous</a>
    </div>
    <br><br>
    <div id="close"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
    </div>

<li><a href="/digitalworks.php">digital works</a></li>
<li><a href="/CV.php">CV/resumé</a></li>
<li><a href="/contact.php">contact</a></li>
</ul>

Answer 1

将用于隐藏div的脚本添加到单击菜单项时用于显示div的脚本中，以便在单击菜单项时，代码首先隐藏所有可以来回切换的div，然后仅显示对应的div到您刚刚单击的菜单项。

另外，您已将ID“关闭”分配给两个不同的div。 ID应该是唯一的-只能使用一次。 为避免这种情况，请使“ close”不是一个类和ID。

Answer 2

在您的情况下，您只是不隐藏下一个弹出窗口，并且它的z索引可能比第一个弹出窗口高，因此您只需要先隐藏它，然后再正常隐藏下一个div弹出窗口即可。 通过jQuery解决方案：

$('#showFirst').bind('click', function(){
    $('#1').show();
    $('#2').hide();
})

这是小提琴http://jsfiddle.net/Goodluck/uxv73/