자바 스크립트 모달이 작동하지 않습니다.

자바 스크립트에 대해 공부하려면 대괄호 도구를 사용하고 있습니다. 미리보기가 표시되면 버튼이 표시됩니다. 그러나 버튼을 여러 번 클릭하고 코드를 변경하더라도 아무 일도 일어나지 않습니다. 모달이 나타나지 않습니다. 모달에 관한 비슷한 질문이 많이 있다는 것을 알고 있습니다. 몇 가지 답변을 읽었지만이 문제를 해결할 수 없습니다. 누군가이 문제를 해결할 수있는 방법을 조언 해 줄 수 있습니까?자바 스크립트 모달이 작동하지 않습니다.

<!DOCTYPE html > 
<html> 
<head> 

    <link rel="stylesheet" href="modal.css"> 
</head> 
<body> 
    <script type="text/javascript"> 
    // Get the modal 
    var modal = document.getElementById('myModal'); 

    // Get the button that opens the modal 
    var btn = document.getElementById("myBtn"); 

    // Get the <span> element that closes the modal 
    var span = document.getElementsByClassName("close")[0]; 

    // When the user clicks on the button, open the modal 
    btn.onclick = function() { 
    modal.style.display = "block"; 
    } 

    // When the user clicks on <span> (x), close the modal 
    span.onclick = function() { 
    modal.style.display = "none"; 
    } 

    // When the user clicks anywhere outside of the modal, close it 
    window.onclick = function(event) { 
    if (event.target == modal) { 
    modal.style.display = "none"; 
     } 
    } 
    </script> 

    <!-- Trigger/Open The Modal --> 
    <button id="myBtn">Open Modal</button> 

    <!-- The Modal --> 
    <div id="myModal" class="modal"> 

    <!-- Modal content --> 
    <div class="modal-content"> 
    <span class="close">x</span> 
     <p>Some text in the Modal..</p> 
    </div> 
</div>

출처

2016-10-04 camila

답 중 하나가 도움이 되었습니까? 아니면 아직도 붙어 있습니까? @ 카밀라 – JeremyS

. onload 이벤트를 사용하거나 jQuery로 문서를 준비하거나 모달 HTML 뒤에 Javascript를 넣어야합니다. btn 클릭 이벤트에 콘솔 로그를 넣어서 dev 도구 콘솔을보고 발사한다는 것을 알 수 있습니다.

<!DOCTYPE html > 
    <html> 
     <head> 
      <link rel="stylesheet" href="modal.css"> 
     </head> 
     <body> 
      <script type="text/javascript"> 
       function modalFun(){ 
        // Get the modal 
        var modal = document.getElementById('myModal'); 

        // Get the button that opens the modal 
        var btn = document.getElementById("myBtn"); 

        // Get the <span> element that closes the modal 
        var span = document.getElementsByClassName("close")[0]; 

        // When the user clicks on the button, open the modal 
        btn.onclick = function() { 
         console.log(modal); 
         modal.style.display = "block"; 
        } 

        // When the user clicks on <span> (x), close the modal 
        span.onclick = function() { 
         modal.style.display = "none"; 
        } 

        // When the user clicks anywhere outside of the modal, close it 
        window.onclick = function(event) { 
         if (event.target == modal) { 
          modal.style.display = "none"; 
         } 
        } 
       } 

       window.onload=modalFun; 
      </script> 
      <!-- Trigger/Open The Modal --> 
      <button id="myBtn">Open Modal</button> 

      <!-- The Modal --> 
      <div id="myModal" class="modal"> 
       <!-- Modal content --> 
       <div class="modal-content"> 
        <span class="close">x</span> 
        <p>Some text in the Modal..</p> 
       </div> 
      </div> 
    </body> 
</html>

출처

2016-10-04 17:03:24 JeremyS

그것은 작동합니다! 감사!!!! – camila

좋아요! 행운을 빕니다. – JeremyS

브라우저는 위에서 아래로 페이지를로드하는 것입니다. 따라서 html 요소가로드되기 전에 스크립트가 실행되어 찾을 수 없습니다.

해결 방법은 <script> 태그를 넣고 닫기 전에 </body> 태그를 닫고 모든 페이지 요소를 닫는 것입니다. 이 주제에 대한

더 : 로드하기 전에 귀하의 자바 스크립트가 여러분의 버튼을 모달을 찾고 Where is the best place to put tags in HTML markup?

출처

2016-10-04 16:50:28 aBiscuit

자바 스크립트 모달이 작동하지 않습니다.

답변

관련 문제