2013-09-02 8 views
1

HTML과 자바 스크립트가있는 웹 사이트 팝업 메뉴를 만들었습니다. 팝업 상자를 닫으면 내부에 버튼이있는 div 컨테이너를 만드는 버튼을 얻을 수있었습니다. 결국에는 더 많은 버튼과 모든 종류의 것들이있을 것입니다. 그러나 나는 지금 그것을 간단하게 유지하고 있습니다. Javascript가 내 강점이 아니라고 말하자. 모든 버튼이 올바르게 작동하고 div가 숨겨져있는 지금 문제는 "닫기"버튼을 누르면 div가 사라지는 반면 그 안에있는 요소는 사라지는 것입니다. 나는 (팝업 밖으로 div 나타납니다 원인) "메뉴"단추를 활성화 할 때 팝 아웃 div 내의 요소를 숨기거나 제거 할 if else 스크립트를 만들 수 있기를 기대하고 있습니다. 그것을 알아 내기 시작하기 위해, 메뉴 버튼을 눌렀을 때 실행되는 스크립트가 활성화되어 있는지를 감지 할 수있는 스크립트가 필요합니다. 이 문제를 잘 설명하지 못하면 사과 드리지만 관련 코드는 아래에 붙여 넣어 도움이 될 것입니다. 다른 스크립트가 실행 중일 때이를 감지하여 if else 스크립트를 활성화 할 수있는 스크립트가 있습니까? 보너스로, 누군가 조건 적으로 요소를 숨길 수있는 (또는 제거 할 수있는) 스크립트에 대한 아이디어가 있습니까? 모두 함께 할 것이다 사랑 : 여기 다른 스크립트가 활성화되었는지 확인하는 자바 스크립트가 있습니까?

코드입니다 : 및 자바 스크립트 HTML -

<div> 
    <script> 
     function sidebar() { 
      x = document.getElementById("sbb") 
      x.style.width = "0"; 
      x.style.position = "relative"; 
      x = document.getElementById("sba") 
      x.style.width = "200px"; 
      x.style.top = "0px"; 
      x.style.bottom = "0px"; 
      x.style.position = "absolute"; 
     } 
    </script> 
    <script> 
     function closesb() { 
      x = document.getElementById("sba") 
      x.style.width = "0"; 
      x.style.position = "relative"; 
     } 
    </script> 
    <div style="width:100%; height:100; z-index:3"> 
     <button type="button" onclick="sidebar()">MENU</button> 
    </div> 
    <div class="sidebar"> 
     <div class="sba" id="sba"> 
      <button type="button" onclick="closesb()">CLOSE</button>yellow</div> 
     <div class="sbb" id="sbb">yellow</div> 
    </div> 
</div> 

CSS -

.sidebar{ 
    position: absolute; 
    z-index: 2; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 
.sba{ 
    width:200px; 
    top:0px; 
    bottom:0px; 
    background-color:#787878; 
    opacity:.75; 
    position:absolute; 
    height:10em; 
} 
.sbb{ 
    top:0px; 
    bottom:0px; 
    right:0px; 
    width:100%; 
    margin-left:200px; 
    height:100%; 
    position:absolute; 
} 

참고 :

,

1 - divs "sba"및 "sbb"에서 "yellow"라는 단어는 팝업 메뉴가 레이어로 이루어져 있기 때문에 페이지에서 div의 위치를 ​​결정하는 것입니다. 2 - 버튼 스크립트는 페이지 및 전체 웹 사이트에서 실행되는 유일한 스크립트입니다. 3- 나는 Javascript와 HTML의 답변에만 관심이 있으며, 모든 브라우저에서 작동합니다. 거의 모든 것, 지금 당장하십시오.

+0

당신이'디스플레이를 사용하지 않는 특별한 이유가있다 : 사업부를 숨길 none'to은? – rps

답변

1

http://jsfiddle.net/jpEqt/1/

function sidebar() { 
     x = document.getElementById("sba") 
     x.style.display = "block"; 
    } 

function closesb() { 
     x = document.getElementById("sba"); 
     x.style.display = "none"; 
    } 

<div class="sba" id="sba" style="display:none"> 
관련 문제