Page redirects to a blank link when using anchor tag to open a modal

Question

I am trying to open a modal window using the anchor tag. The modal window successfully opens. However, the page redirects to a random blank page upon opening the modal window. How do I fix this?

 //script for modal var modal = document.getElementById("modalAdd"); var btn = document.getElementById("addMissing"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } 

 <!-- anchor --> <a data-toggle="modal" href="#modalAdd" id="addMissing"> Add </a> <!-- modal div --> <div id="modalAdd"> <div id="modalAdd-content"> <span class="close"> &times; </span> <p> Modal Content </p> </div> </div> 

Answer 1

You should probably use button to open a modal, but here's solution for your issue:

btn.onclick = function(event) {
  event.preventDefault(); // this will prevent default action
  modal.style.display = "block";
}

Answer 2

用href =“javascript：void（0）”替换你的href标签，并通过数据模型获取值