为什么我的JavaScript无法打开此模式框？ [英] Why won't my JavaScript open this modal box?
本文介绍了为什么我的JavaScript无法打开此模式框？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正试图调用click元素来打开模式框，但我不确定自己在做什么错。
I'm trying to call up a click element to open up a modal box, and i'm unsure what I'm doing wrong.
我已经完成了基本的调试，但是我对此还比较陌生，因此我可能只是缺少了一些东西。
I've done basic debugging, but I'm still relatively new to this, so I may just be missing something.
var focus = document.getElementById("teal");
var modal = document.getElementById("bg-modal");
if (focus) {
focus.addEventListener("click", function() {
modal.style.display = "flex";
});
}
#bg-modal {
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
justify-content: center;
align-items: center;
display: none;
}
.modal-contents {
height: 600px;
width: 1080px;
background-color: white;
text-align: center;
padding: 20px;
position: relative;
border-radius: 4px;
}
<div class = "col-md-3" id = "teal-col">
<a id = "teal-link" href = "">
<div id = 'teal'>
</div>
</a>
</div>
<div id = 'bg-modal'>
<div id = "modal-contents">
<div class = "close"> + </div>
</div>
</div>
我是
推荐答案
那是因为点击放在< a> 标记上会强制浏览器遵循提供的链接。因此页面会重新加载。
That happens because click onto <a> tag forces browser to follow provided link. So page reloads.
var focus = document.getElementById("teal");
var modal = document.getElementById("bg-modal");
if (focus) {
focus.addEventListener("click", function(event) {
event.preventDefault();
modal.style.display = "flex";
});
}
我还看到了您重复的问题，您在其中提供了 < head> 标记。
将javascript文件导入从< head> 标记的顶部移到< body> 标记
I also saw your duplicate question, where you provided <head> tag.
Move javascript file import from top of the <head> tag to bottom of the <body> tag
这篇关于为什么我的JavaScript无法打开此模式框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
