You can use a tag with preventDefault
const opener = document.querySelector('.btn');
opener.onclick = function(e) {
e.preventDefault(); // to prevent link's default behaviour
modal.style.display = "block";
}<a class="btn" href="#">Open</a>Include an anchor in your html and attach an event handler similar to the one for the button. You may add code to suppress the default behavior of clicking an anchor (ie. following the uri in the href attribute).
If you do not use the onclick attribute but assign handlers through the dom api with addEventListener, assert that the elements to attach the handlers to do exist. That’s what the ready function attached to the window’s load event is for.
let a
, btn
, modal
, span
;
// When the user clicks on the button, open the modal
function openModal(eve) {
if (eve.target.tagName.toLowerCase() === 'a') {
// Prevent standard link behavior
eve.preventDefault();
}
modal.style.display = "block";
} // openModal
// When the user clicks on <span> (x), close the modal
function closeModal(eve) {
modal.style.display = "none";
} // closeModal
function ready () {
modal = document.getElementById("myModal");
// Get the anchor that opens the modal
a = document.getElementById("myAnchor");
// Get the button that opens the modal
btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
span = document.getElementsByClassName("close")[0];
a.addEventListener ( 'click', openModal );
btn.addEventListener ( 'click', openModal );
span.addEventListener ( 'click', closeModal );
} // ready
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(eve) {
if (eve.target === modal) {
modal.style.display = "none";
}
};
window.addEventListener ( 'load', ready );/* 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: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* 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;
}<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- Trigger/Open The Modal -->
<a id="myAnchor" href="#">Open Modal here as well</a>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>Credits
CSS and HTML of the online snippet from the w3School page the OP has referenced.
I use this (w3school) code to trigger the modal when clicking on the button
// 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";
}
}
instead of using the button I want to use <a>‘s onclick=function() method to trigger the modal. I already tried to exchange the *tn.onlclick-part, but that didnt work. How to accomplish this?
What exactly
EventTarget.addEventListener()Please also see
@phil it’s following the # in the href attribute instead of opening the modal
@RokoC.Buljan thanks for sharing!
But as it was said, the best way is to use
Would it be possible to bind this to an ID insted of a class?
@timlwsk Yes. Assuming the id was
Thanks for this detailed answer!