使用锚标记打开模态时页面重定向到空白链接 [英] Page redirects to a blank link when using anchor tag to open a modal

问题描述

我正在尝试使用锚标记打开一个模态窗口.模态窗口成功打开.但是，打开模态窗口时，页面会重定向到随机的空白页面.我该如何解决这个问题?

//模态脚本var modal = document.getElementById("modalAdd");var btn = document.getElementById("addMissing");var span = document.getElementsByClassName("close")[0];btn.onclick = 函数(){modal.style.display = "块";}span.onclick = 函数(){modal.style.display = "无";}window.onclick = 函数(事件){if (event.target == modal) {modal.style.display = "无";}}

<a data-toggle="modal" href="#modalAdd" id="addMissing">添加<!-- 模态 div --><div id="modalAdd"><div id="modalAdd-content"><span class="close">&times;</span><p>模态内容

解决方案

您可能应该使用 button 打开一个模态框，但这里有解决您的问题的方法:

btn.onclick = function(event) {event.preventDefault();//这将阻止默认操作modal.style.display = "块";}

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>

解决方案

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";
}

这篇关于使用锚标记打开模态时页面重定向到空白链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！