Question

我正忙着为网站构建模块并在新脚本中制作模块。我无法弄清楚我做错了什么，并希望比我聪明的人可以提供帮助。这是代码：

<DOCTYPE html>
  <html lang="en">
  <head>
     <title>Project</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script>
    var modal = document.getElementById("myModal");
    document.getElementById("modl").onclick = function() {
      modal.style.display = "Block";
   }
   document.getElementsByClassName('close')[0].onclick = function(){
      modal.style.display = "none";
   };

    window.onclick = function(event) {
       if (event.target === modal) {
          modal.style.display = 'none';
       }
    }
    </script>
</head>
     <div class="body">
        <button id="modl">open Modal</button>
     </div>
     <div id="myModal" class="modal">
        <div class="modal-content">
           <span class="close">&times;</span>
           <p>my modal text. yay!</p>
           <div class="modal-body">
             <p>some cool text that i</p>
             <p>cant think of right now</p>
           </div>
           <div class="modal-footer">
             <h3>hola</h3>
           </div>
        </div>
     </div>
  </body>
  </html>

发生的事情是它说modal为null或第一个函数为null。

Answer 1

您确定创建模态的div具有下一个结构：

<div id="myModal"></div>

这将是我的第一种方法，如果您可以上传所有代码，那将更有用。祝你好运！

模态创作，JS返回空

1 个答案: