팝업?

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에 "close"라는 ID를 할당했습니다. ID는 고유해야하며 한 번만 사용됩니다. 이 문제를 피하려면 클래스를 닫지 말고 ID로 설정하십시오.

Answer 2

당신은 다음 팝업을 숨기지 않고 첫 번째 것보다 높은 z- 색인을 가질 수 있으므로 먼저 숨기고 나서 다음 div 팝업을 평소에 숨길 필요가 있습니다. jQuery를 통해 해결 방법 : 다음

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

는 바이올린 http://jsfiddle.net/Goodluck/uxv73/

입니다