Javascript Modal funktioniert nicht

Ich benutze Klammer-Tool, um über Javascript zu studieren. Wenn ich Vorschau sehe, kann ich eine Schaltfläche sehen. Obwohl ich mehrmals auf die Schaltfläche klicke und die Codes ändere, passiert nichts. Modal wird nicht angezeigt. Ich weiß, dass es so viele ähnliche Fragen über Modal gibt. Ich lese einige Antworten, aber ich konnte dieses Problem nicht lösen. Kann mir bitte jemand Ratschläge geben, wie ich dieses Problem lösen kann?Javascript Modal funktioniert nicht

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

Quelle

2016-10-04 camila

Hat eine der Antworten geholfen? Oder steckst du immer noch fest? @camila – JeremyS

Ihre Javascript für Ihre Schaltfläche und modal sucht, bevor sie geladen haben. Sie müssen entweder ein Onload-Ereignis verwenden, mit jQuery document-fähig sein oder Ihr Javascript nach Ihrem modalen HTML-Code ablegen. Ich habe ein Console-Protokoll in Ihr btn click-Ereignis eingefügt, damit Sie wissen, dass es ausgelöst wird, indem Sie in Ihrer Dev Tools-Konsole nachsehen.

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

Quelle

2016-10-04 17:03:24 JeremyS

Es funktioniert !!! Vielen Dank!!!! – camila

Großartig! Viel Glück. – JeremyS

Browser eine Seite von oben nach unten zu laden. Daher wird Ihr Skript ausgeführt, bevor HTML-Elemente geladen werden und sie nicht finden können.

Lösung ist Ihre <script> Tag vor dem Schließen </body> Tag, aber nach all den Seitenelementen.

Mehr zu diesem Thema: Where is the best place to put tags in HTML markup?

Quelle

2016-10-04 16:50:28 aBiscuit

Javascript Modal funktioniert nicht

Antwort

Verwandte Themen