Javascript 为什么我的函数调用我网站的另一个页面而不是我的模态？

我试图从一个按钮启动一个模式登录窗口。我已经做了一些故障排除和模式工程，直到我把一个无序的列表链接到我的网站上的另一个页面

在index.html上，模式按钮会将我带到about.html页面。在该页面上再次单击模式按钮时，模式仅闪烁，但不可见

这是我的HTML：

<nav>
    <ul class="navMenu">
      <li><a href="index.html">Home</li>
      <li><a href="about.html">About</li>
    </ul>
    <ul class="userAccount">
      <button id="myBtn"><i class="material-icons md-48 md-light">account_circle</i></button>
      <div id="myModal" class="modal">
        <div class="modal-content">
          <span class="close">&times;</span>
          <p>
            Some text in the modal...
          </p>
          <script src="js/userLoginModal.js"></script>
        </div>
      </div>
    </ul>
</nav>

家
关于


会计圈
&时代；

模态中的一些文本。。。

以下是我的JS：

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

//获取模式
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

您没有关闭

a

标记，因此

或文档结尾的所有内容都放在链接中

关闭

a

标记：

<li><a href="index.html">Home</a></li>
<!--                         ^^^^  -->

---

文档中的其他

a

标记也是如此。

以下是完成任务的简单方法。希望有帮助

函数切换覆盖（）{
var overlay=document.getElementById（'overlay'）；
var modal=document.getElementById（'myModal'）；
overlay.style.opacity=.6；
if（overlay.style.display==“块”）{
overlay.style.display=“无”；
modal.style.display=“无”；
}否则{
overlay.style.display=“块”；
modal.style.display=“块”；
}
}

div#覆盖{
显示：无；
z指数：2；
背景：#000；
位置：固定；
宽度：100%；
身高：100%；
顶部：0px；
左：0px；
文本对齐：居中；
}
部门#myModal{
显示：无；
位置：相对位置；
z指数：3；
保证金：150px自动0px自动；
宽度：400px；
高度：200px；
背景：#FFF；
颜色：#000；
}
div#wrapper{
位置：绝对位置；
顶部：0px；
左：0px；
左侧填充：24px；
}

模态中的一些文本

接近

家
关于

会计圈

感谢您的关注，易卜拉欣。我关闭了所有必要的a标记，但不幸的是，它没有解决问题。@NateTheGreat不是单击，而是右键单击，然后选择并查看您正在单击的元素。一定是做得不对。完成并重新应用更改，您的解决方案有效。简单的疏忽，但我欣赏第二双眼睛。谢谢