JavaScript模式不起作用

我使用支架工具来研究JavaScript。当我看到预览时，我可以看到一个按钮。但是，即使我多次单击该按钮并更改了代码，也不会发生任何事情。莫代尔没有出现。我知道有这么多关于模态的类似问题。我读了一些答案，但我无法解决这个问题。有人可以请我给我建议我怎么能解决这个问题？JavaScript模式不起作用

<!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

答案都有帮助吗？还是你仍然坚持？ @camila – JeremyS

JavaScript是找你的按钮和模式他们已经载入前。您需要使用onload事件，使用jQuery准备好文档，或者将您的Javascript放在模态html之后。我把一个控制台登录到你的btn点击事件中，这样你就可以通过查看你的开发工具控制台来知道它正在启动。

<!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元素之前运行，并且找不到它们。

解决方案是在您关闭</body>标记之前放置您的<script>标记，但在所有页面元素之后。

更多关于这个话题： Where is the best place to put tags in HTML markup?

来源

2016-10-04 16:50:28 aBiscuit

JavaScript模式不起作用

回答

相关问题