Javascript 即使我将其设置为可见，模态也不会显示？

我是网络开发新手，我试图在点击“注册”和“下载”按钮时创建一个弹出窗口。我将类触发器作为一个类放入这些按钮中，并向该类添加了一个单击侦听器。但是，当我尝试单击按钮将“showmodel”类切换到它时，它不会显示。我检查了网站，我可以看到按钮工作，当我点击按钮时，该类实际上被添加到网站中，但什么都没有显示？所以我尝试将可见性设置为可见，但仍然没有显示任何内容。我不知道该怎么办。如果有人能引导我找到答案，那就太好了。我仍在努力学习如何更有效地使用我的资源

模态代码（工作/显示）--->

嵌入到我的网站中的模式代码（不会显示）--->

HTML

JS

---

你在这里遇到的一个问题实际上是你的事件触发。 如果我们查看上面发布的您的JS：

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");

function toggleModal(){
    modal.classList.toggle("show-modal");
}

function windowOnClick(event){
    if (event.target === modal){
        toggleModal();
    }
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

您正试图通过两种方式添加单击事件-直接在按钮上，通过窗口委派。直接版本工作正常：

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");

function toggleModal(){
    modal.classList.toggle("show-modal");
}


trigger.addEventListener("click", toggleModal);

您已将eventlistener正确添加到按钮，单击它将调用“toggleModal”事件

但是，窗口上的事件是一个问题：

function windowOnClick(event){
    if (event.target === modal){
        toggleModal();
    }
}
window.addEventListener("click", windowOnClick);

如果在该函数中添加console.log，如下所示：

function windowOnClick(event){
  console.log(event.target)
  if (event.target === modal){
    toggleModal();
  }
}
window.addEventListener("click", windowOnClick);

您将看到

事件.target

等于

，而不是

模式

。有很多方法可以解决这个问题，但这并不是必须的，因为如果删除这个方法，直接方法就可以了

---

我看到的第二个问题是，正如你所建议的，你的模态出现在其他内容后面，所以你永远看不到它。如果您将

z-index:2

添加到

。show modal

它应该将其移动到您的内容前面。

我认为问题在于

。modal

类可能以前定义过（即引导）

只需更改

.modal

类名：

.myModal{
位置：固定；
排名：0；
左：0；
}

还有你的html:

在js

var modal=document.querySelector（“.myModal”）

干杯
您需要为
addEventListener
中引用的函数提供方括号（如
toggleModal（）
）。。。虽然默认情况下，你的模式对我来说是打开的。这里有很多事情要做。对于初学者来说，您链接到的JSFIDLE与此处发布的代码不匹配，因此根据阅读的人的不同，您可能会得到不同的答案。隐藏或显示模式的最简单方法是在
.modal
中简单地设置
display:none
，在
.show modal
中设置
display:block
，但看起来您也在尝试一些需要更多工作的转换。目前，您的默认
.modal
和
.show modal
样式都包含css，可以使其可见，因此我希望它始终显示，而不是从不显示。谢谢，我现在已经解决了这个问题。然而，我面临的主要问题是，我根本无法让它出现。我觉得它可能隐藏在某些东西后面，但我不确定…@ChrisBoon好的，我会更新jsfiddle，所以我只是用代码尝试了一下，将可见性改回隐藏状态，它就可以工作了。所以我猜它可能隐藏在我网站上的其他东西后面？
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");

function toggleModal(){
    modal.classList.toggle("show-modal");
}


trigger.addEventListener("click", toggleModal);

function windowOnClick(event){
    if (event.target === modal){
        toggleModal();
    }
}
window.addEventListener("click", windowOnClick);

function windowOnClick(event){
  console.log(event.target)
  if (event.target === modal){
    toggleModal();
  }
}
window.addEventListener("click", windowOnClick);