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を使用してドキュメントを準備するか、またはモーダルHTMLの後にJavascriptを置く必要があります。私はあなたのdevtツールのコンソールを見て発砲していることを知っているように、コンソールのログを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要素がロードされる前にスクリプトが実行され、見つからないことがあります。

解決策は、<script>タグを入れてから、</body>タグを閉じる前に、すべてのページ要素の後に置くことです。このトピックに関する

より： Where is the best place to put tags in HTML markup?

出典

2016-10-04 16:50:28 aBiscuit

javascriptのモーダルが機能しない

答えて

関連する問題