Modal undefined

Question

Ich versuche, eine modale Promp zu machen, wenn meine Seite öffnet, ich will es ein Bild zeigen. Aus irgendeinem Grund sagt es mir immer wieder, dass das Bild nicht definiert ist, wenn ich es mit der Onlick-Funktion benutze, zeigt es sich in Ordnung. Ich verwende eine modifizierte Version eines W3School-Skripts. Irgendwelche Ideen? Danke im Voraus! Code:

  HTML:     
          <img id="myImg" src="http://192.185.4.115/~hitclubar/images/prueba.png" alt="" width="300" height="200" style="display:none;"> 

          <!--The Modal --> 
          <div id="myModal" class="modal"> 
           <a href="http://facebook.com/Hitclubar"> Click Evento Facebook </a> 
           <span class="close">×</span> 
           <img class="modal-content" id="img01"> 
           <div id="caption"></div> 
          </div> 

Javascript:

// Get the modal 
var modal = document.getElementById('myModal'); 

// Get the image and insert it inside the modal - use its "alt" text as a caption 
var img = document.getElementById('myImg'); 
var modalImg = document.getElementById("img01"); 
var captionText = document.getElementById("caption"); 


$(function(){ 
modal.style.display = "block"; 
modalImg.src = document.getElementById('myImg'); 
modalImg.alt = "HOLA"; 
captionText.innerHTML = "HOLA"; 
}); 


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

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

CSS:

#myImg { 
         border-radius: 5px; 
         cursor: pointer; 
         transition: 0.3s; 
       } 

       #myImg:hover {opacity: 0.7;} 

       /* The Modal (background) */ 
       .modal { 
         display: none; /* Hidden by default */ 
         position: fixed; /* Stay in place */ 
         z-index: 1; /* Sit on top */ 
         padding-top: 100px; /* Location of the box */ 
         left: 0; 
         top: 0; 
         width: 100%; /* Full width */ 
         height: 100%; /* Full height */ 
         overflow: auto; /* Enable scroll if needed */ 
         background-color: rgb(0,0,0); /* Fallback color */ 
         background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ 
       } 

       /* Modal Content (image) */ 
       .modal-content { 
         margin: auto; 
         display: block; 
         width: 80%; 
         max-width: 700px; 
       } 

       /* Caption of Modal Image */ 
       #caption { 
         margin: auto; 
         display: block; 
         width: 80%; 
         max-width: 700px; 
         text-align: center; 
         color: #ccc; 
         padding: 10px 0; 
         height: 170px; 
        } 

        /* Add Animation */ 
        .modal-content, #caption { 
         -webkit-animation-name: zoom; 
         -webkit-animation-duration: 0.6s; 
         animation-name: zoom; 
         animation-duration: 0.6s; 
        } 

        @-webkit-keyframes zoom { 
         from {-webkit-transform:scale(0)} 
         to {-webkit-transform:scale(1)} 
        } 

        @keyframes zoom { 
         from {transform:scale(0)} 
         to {transform:scale(1)} 
        } 

        /* The Close Button */ 
        .close { 
         position: absolute; 
         top: 15px; 
         right: 35px; 
         color: #f1f1f1; 
         font-size: 40px; 
         font-weight: bold; 
         transition: 0.3s; 
        } 

        .close:hover, 
        .close:focus { 
         color: #bbb; 
         text-decoration: none; 
         cursor: pointer; 
        } 

        /* 100% Image Width on Smaller Screens */ 
        @media only screen and (max-width: 700px){ 
       .modal-content { 
         width: 100%; 
         } 
        } 

Answer 1

Sie platziert

var modal = document.getElementById('myModal'); 

am Anfang des Skripts. Auf diese Weise versucht das Skript, das Modal beim Laden der Seite frühzeitig zu finden (was fehlschlägt, da es noch nicht existiert).

Versuchen Sie es so:

$(function() { 
    // Get the modal 
    var modal = document.getElementById('myModal'); 

    // Get the image and insert it inside the modal - use its "alt" text as a caption 
    var img = document.getElementById('myImg'); 
    var modalImg = document.getElementById("img01"); 
    var captionText = document.getElementById("caption"); 

    modal.style.display = "block"; 
    modalImg.src = document.getElementById('myImg'); 
    modalImg.alt = "HOLA"; 
    captionText.innerHTML = "HOLA"; 
}); 

Nun ist die modale wird referenziert, wenn die Seite vollständig die HTML geladen ist und es sollte funktionieren.