<span> onclick Ereignis nicht feuernd

Question

Ich versuche, ein einfaches modales Popup zu machen, wenn ich auf einen Anmeldeknopf klicke. Das Modal öffnet sich gut, indem Sie display: none zu display: block ändern, aber ich kann es nicht schließen, indem Sie auf das <span>-Tag klicken.

Das Klickereignis wird nicht auf <span> ausgelöst, aber es wird ausgelöst, wenn außerhalb des Containers geklickt wird. Ich habe keine Idee warum. Was mache ich falsch?

Hier ist der HTML:

<a id="modalBtn" href="#0">Get started</a> 
    <div id="modalPopup" class="modal"> 
    <div class="modal-content"> 
     <span class="close">&times;</span> 
     <div> 
     <input id="email" type="email" placeholder="Email"> 
     <input id="password" type="password" placeholder="Password"> 
     <button id="quickstart-sign-in" href="#">Log in</button> 
     <button id ="quickstart-sign-up" href="#">Sign up</button> 
     </div> 
    </div> 
    </div> 

Und die JS:

var modalPopup = document.getElementById('modalPopup'); 
var modalBtn = document.getElementById('modalBtn'); 
var close = document.getElementsByClassName('close'); 

// Opens modal on modalBtn click 
modalBtn.onclick = function() { 
modalPopup.style.display = "block"; 
} 

// Closes the modal on 'X' click 
close.onclick = function() { 
modalPopup.style.display = "none"; 
console.log('wtf why is this not working') 
} 

// Closes the modal on outside window click 
window.onclick = function(event) { 
    if (event.target == modalPopup) { 
    modalPopup.style.display = "none"; 
    } 
} 

Hier ist eine Geige: https://jsfiddle.net/3n1mpaex/1/

Sorry, wenn dies zuvor gestellt wurde, ich ein bisschen herum gesucht und couldn Ich finde die Antwort, die ich brauche. Vielen Dank!

Answer 1

getElementsByClassName gibt ein Array verwenden können. Sie fügen 'onclick' dem Array statt der Spanne hinzu.

So können Sie einfach Ihre Funktion wie folgt aktualisieren.

close[0].onclick = function() { 
modalPopup.style.display = "none"; 
console.log('wtf why is this not working') 
} 

https://jsfiddle.net/3n1mpaex/3/

Answer 2

document.getElementsByClassName Rückkehr Sammlung/Array, so dass Sie close[0] statt close
updated fiddle

// Get modal elements 
 
var modalPopup = document.getElementById('modalPopup'); 
 
var modalBtn = document.getElementById('modalBtn'); 
 
var close = document.getElementsByClassName('close'); 
 
// Opens modal on modalBtn click 
 
modalBtn.onclick = function() { 
 
    modalPopup.style.display = "block"; 
 
    } 
 
    // Closes the modal on 'X' click 
 
close[0].onclick = function() { 
 
    modalPopup.style.display = "none"; 
 
    console.log('wtf why is this not working') 
 
    } 
 
    // Closes the modal on 
 
window.onclick = function(event) { 
 
    if (event.target == modalPopup) { 
 
    modalPopup.style.display = "none"; 
 
    } 
 
}

/* The Modal (background) */ 
 

 
.modal { 
 
    display: none; 
 
    /* Hidden by default */ 
 
    position: fixed; 
 
    /* Stay in place */ 
 
    z-index: 1; 
 
    /* Sit on top */ 
 
    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.4); 
 
    /* Black w/ opacity */ 
 
} 
 

 

 
/* Modal Content/Box */ 
 

 
.modal-content { 
 
    background-color: #fefefe; 
 
    margin: 150px auto; 
 
    /* 15% from the top and centered */ 
 
    padding: 20px; 
 
    border: 1px solid #888; 
 
    width: 375px; 
 
    /* Could be more or less, depending on screen size */ 
 
} 
 

 

 
/* The Close Button */ 
 

 
.close { 
 
    color: #aaa; 
 
    float: right; 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
} 
 

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

<a id="modalBtn" href="#0">CLICK HERE</a> 
 
<div id="modalPopup" class="modal"> 
 
    <div class="modal-content"> 
 
    <span class="close">&times;</span> 
 
    <div> 
 
     <input id="email" type="email" placeholder="Email"> 
 
     <input id="password" type="password" placeholder="Password"> 
 
     <button id="quickstart-sign-in" href="#">Log in</button> 
 
     <button id="quickstart-sign-up" href="#">Sign up</button> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

einfach Ihre close Klasse in -ID ändern (<span id="close"></span>). Das ist es! :) Alles Gute!
Check this out:

// Get modal elements 
 
var modalPopup = document.getElementById('modalPopup'); 
 
var modalBtn = document.getElementById('modalBtn'); 
 
var close = document.getElementById('close'); 
 
// Opens modal on modalBtn click 
 
modalBtn.onclick = function() { 
 
    modalPopup.style.display = "block"; 
 
    } 
 
    // Closes the modal on 'X' click 
 
close.onclick = function() { 
 
    modalPopup.style.display = "none"; 
 
    console.log('It is now working') 
 
    } 
 
    // Closes the modal on 
 
window.onclick = function(event) { 
 
    if (event.target == modalPopup) { 
 
    modalPopup.style.display = "none"; 
 
    } 
 
}

/* The Modal (background) */ 
 

 
.modal { 
 
    display: none; 
 
    /* Hidden by default */ 
 
    position: fixed; 
 
    /* Stay in place */ 
 
    z-index: 1; 
 
    /* Sit on top */ 
 
    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.4); 
 
    /* Black w/ opacity */ 
 
} 
 

 

 
/* Modal Content/Box */ 
 

 
.modal-content { 
 
    background-color: #fefefe; 
 
    margin: 150px auto; 
 
    /* 15% from the top and centered */ 
 
    padding: 20px; 
 
    border: 1px solid #888; 
 
    width: 375px; 
 
    /* Could be more or less, depending on screen size */ 
 
} 
 

 

 
/* The Close Button */ 
 

 
#close { 
 
    color: #aaa; 
 
    float: right; 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
} 
 

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

<a id="modalBtn" href="#0">CLICK HERE</a> 
 
<div id="modalPopup" class="modal"> 
 
    <div class="modal-content"> 
 
    <span id="close">&times;</span> 
 
    <div> 
 
     <input id="email" type="email" placeholder="Email"> 
 
     <input id="password" type="password" placeholder="Password"> 
 
     <button id="quickstart-sign-in" href="#">Log in</button> 
 
     <button id="quickstart-sign-up" href="#">Sign up</button> 
 
    </div> 
 
    </div> 
 
</div>