我正在使用一个模式,点击它时应该全屏弹出。 一切都很好,模态弹出全屏但标题(标识+菜单)仍然显示。
我正在尝试使用JS,因此当单击模态时,我想将z-index应用于标题,当单击关闭按钮时,我将应用另一个z-index来修复标题。
要点击的链接是:
<a class="vPlay vPlay-btn clickformodal" href="#modal-our-work-1" data-toggle="modal" data-video="241737557"><img src="/wp-content/uploads/2018/04/play1.png" /></a>
现在JS代码是这样的:
let open = document.selectElementByClassName("clickformodal");
let header = document.selectElementByClassName("mk-header");
let close = document.selectElementByClassName("close");
open.addEventListener('click', function () {
header.classList.add("headerbefore");
});
close.addEventListener('click', function () {
header.classList.remove("headerafter");
});
这是将要应用的CSS:
.headerbefore {
z-index: 1;
}
.headerafter {
z-index: 301;
}
这里的问题是它没有做到它应该做的事情,谷歌浏览器在控制台中显示错误,说let open = document.selectElementByClassName("clickformodal");
不是一个功能。
我在这里做错了什么?
请帮帮我,这是我试图解决这个问题的2天,直到现在还没有:/
感谢!!!
答案 0 :(得分:2)
这里有两件事情出错:
应该是getElementsByClassName
,而不是selectElementByClassName
当getElementsByClassName
返回元素集合时,您需要在其末尾添加[0]
,例如document.getElementsByClassName("clickformodal")[0]
let open = document.getElementsByClassName("clickformodal")[0];
let header = document.getElementsByClassName("mk-header")[0];
let close = document.getElementsByClassName("close")[0];
open.addEventListener('click', function () {
header.classList.add("headerbefore");
});
close.addEventListener('click', function () {
header.classList.remove("headerafter");
});
选项可以是querySelector()
而不是
let open = document.querySelector(".clickformodal");
let header = document.querySelector(".mk-header");
let close = document.querySelector(".close");
open.addEventListener('click', function () {
header.classList.add("headerbefore");
});
close.addEventListener('click', function () {
header.classList.remove("headerafter");
});
如果要添加到1以上,请使用querySelectorAll()
(此示例假设打开与关闭一样多,但只有1 标头< / em>的)
let open = document.querySelectorAll(".clickformodal");
let header = document.querySelector(".mk-header");
let close = document.querySelectorAll(".close");
for (var i = 0; i < open.length; i++) {
open[i].addEventListener('click', function () {
header.classList.add("headerbefore");
});
}
for (var j=0; j < close.length; j++) {
close[j].addEventListener('click', function () {
header.classList.remove("headerbefore");
});
}