2013-04-09 3 views
0

모달을 열고 닫을 때 자바 스크립트 함수를 열고 닫으면 모달을 닫을 수 있지만 페이지를 새로 고칠 때까지 처음 두 번 클릭하면 시작됩니다. 다시 2 번 클릭하십시오.Javascript 함수가 2 번 클릭으로 실행됩니다.

자바 스크립트 :

function ToggleModal(Box) { 
     var Modal = document.getElementById(Box); 
     var Display = Modal.style.display; 

     if(Display == 'none') 
     { 
      Modal.style.display = 'block'; 
      document.getElementById('Wrapper').style.overflow = 'hidden'; 
     } 
     else 
     { 
      Modal.style.display = 'none'; 
     } 
    } 

CSS :

.Modal { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-image: url("../IMG/Modal.png"); 
    background-repeat: repeat; 
    z-index: 2000; 
} 

내 사업부 :

<div id="Login" class="Modal"> 
    <div id="LoginForm" class="Form"> 
     <div class="ModalTitle">Sign In <a href="#" class="Toggle" onclick="ToggleModal('Login');"></a></div> 
     <div class="ModalBody"> 
      <form id="LForm" action="/Assets/PHP/Login/Login.php" method="POST"> 
       <label for="User">Username:</label> 
       <input id="User" type="text" name="User" class="Input" placeholder="Username" /> 

       <label for="Pass">Password:</label> 
       <input id="Pass" type="password" name="Pass" class="Input" placeholder="Password" /> 
      </form> 
      <div class="Clear"></div> 
     </div> 
    </div> 
</div> 

이 로고 DIV ID로 나타내지는 스타일이 없습니다.

+0

조언, 모든 것에 대문자를 사용하지 마십시오. 대문자는 생성자를위한 규칙입니다. – elclanrs

+0

if 문을 통해 생각하고 있었는데, 처음에는 아무 것도 표시하지 않으므로 else가 아무 것도 설정하지 않은 상태에서 다시 클릭하면 아무 것도 표시되지 않습니다. –

+0

나는 그것을 얻지 못한다. 어떻게 숨겨져있는 것을 클릭 하는가? – adeneo

답변

4

대부분의 경우 초기 스타일은 "블록"또는 "없음"이외의 것입니다.

처음 클릭하면 (Display == 'none')이 거짓이므로 표시가 "없음"(모달이 나타나지 않음)으로 설정됩니다.

두 번째로 (Display == 'none')이 참이므로 표시가 "차단"으로 설정됩니다.

그런 경우 (Display == 'none')(Display != 'block')으로 변경하여 문제를 해결할 수 있습니다.

+2

게시하지 않은 코드 일부가 표시 속성을 변경하고있을 수 있습니다. 코드의 관련 부분이라고 생각하는 것을 공유하기위한 명성. –

+0

링크를 클릭하여이 기능을 전환 할 수는 있지만 아무것도 실행하지 않습니다. 그 부분은 아무것도 영향을 미치지 않기 때문에 irrelavent입니다. –

관련 문제