Question

我是网络开发的新手，当我点击“注册”和“下载”按钮时，我正在尝试创建一个弹出窗口。我将类触发器作为类放入这些按钮中，并为该类添加了一个单击侦听器。然而，当我去尝试单击按钮以切换“show-modal”类时，它不会显示。我检查了网站，我可以看到按钮工作，当我点击按钮但没有显示任何内容时实际上已经添加了类？因此，我尝试将可见性设置为可见，但仍然没有显示任何内容。我不知道该怎么做。如果有人好指导我找到那个很棒的答案。我还在努力学习如何更有效地使用我的资源！

模态代码（作品/演出）----＆gt; https://jsfiddle.net/51xr6y78/17/

嵌入我网站的模态代码（不会显示）----＆gt; https://jsfiddle.net/hq6vp4ee/

HTML

<div class="modal">
    <div class="modal-content">
        <div class="close-button">&times;</div>
        <h1>This is my modal.</h1>
    </div>
</div>

<div class="main-page-btn container">
        <a href="#" class="register trigger">Register</a>
        <a href="#" class="download trigger">Download</a>
</div>

CSS

.modal{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.5);
   opacity: 1;
   visibility: visible;
   transform: scale(1.1);
   transition: visibility 0s, linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.show-modal{
   opacity: 1;
   visibility: visible;
   transform: scale(1.0);
   transition: visibility 0s, linear 0s, opacity 0.25s 0s, transform 0.25s;
}

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);

Answer 1

我认为问题在于.modal类可能是在之前定义的（即Bootstrap）。

只需更改.modal类名称：

.myModal {
  position: fixed;
  top: 0;
  left: 0;
}

还有您的html：<div class="myModal">

在您的js var modal = document.querySelector(".myModal");

中

欢呼

Answer 2

您遇到的问题实际上是您的事件触发。如果我们看看你上面发布的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);

您正尝试以两种方式添加click事件 - 直接在按钮上添加，并通过窗口委派。直接版本正常运行：

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

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


trigger.addEventListener("click", toggleModal);

您已在该按钮上正确添加了一个eventlistener，然后点击它会调用＆＃39; toggleModal＆＃39;事件

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

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);

您会看到event.target等于<a href="#" class="register trigger">Register</a>，而不是modal。有一些方法可以解决这个问题，但是没有必要，因为如果你删除这个方法，你的直接方法就可以了。

我看到的第二个问题是，正如你的建议，你的模态出现在其他内容的后面，所以你永远不会看到它。如果您将z-index:2添加到.show-modal，则应将其移到您的内容前面。

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

2 个答案: