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

时间:2018-03-26 22:24:44

标签: javascript html css

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

模态代码(作品/演出)----> https://jsfiddle.net/51xr6y78/17/

嵌入我网站的模态代码(不会显示)----> 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);

2 个答案:

答案 0 :(得分:1)

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

只需更改.modal类名称:

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

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

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

欢呼

答案 1 :(得分:0)

您遇到的问题实际上是您的事件触发。 如果我们看看你上面发布的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,则应将其移到您的内容前面。