Solution 1 :

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>

Solution 2 :

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">&times;</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.

Problem :

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?

Comments

Comment posted by Phil

What exactly

Comment posted by EventTarget.addEventListener()

Please also see

Comment posted by timlwsk

@phil it’s following the # in the href attribute instead of opening the modal

Comment posted by timlwsk

@RokoC.Buljan thanks for sharing!

Comment posted by Mark Partola

But as it was said, the best way is to use

Comment posted by timlwsk

Would it be possible to bind this to an ID insted of a class?

Comment posted by collapsar

@timlwsk Yes. Assuming the id was

Comment posted by timlwsk

Thanks for this detailed answer!

By

Leave a Reply

Your email address will not be published. Required fields are marked *