[英]Hide 'close' links when modal is not open
Ive been working on this for hours, I've tried vars, I tried hiding elements, and nothing is working and and and.. sorry for the exitement, but I'm almost down to the end,我已经为此工作了几个小时,我试过 vars,我试过隐藏元素,但没有任何效果,而且......抱歉退出,但我几乎要结束了,
the issue:: I have a basic javascript modal, taken from w3 schools, which has been altered slightly per my needs, https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal问题:我有一个基本的 javascript 模态,取自 w3 学校,根据我的需要略有改动, https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
my javascript code is below.我的 javascript 代码如下。
What I need is, I need to hide the CLOSE span when the modal pop up is hidden,我需要的是,当模态弹出窗口被隐藏时,我需要隐藏 CLOSE 跨度,
<span class="close">CLOSE</span>
in other words, I dont want the close link showing at all times, thw close link should be hidden when modal os closed, and showing when modal is open. <span class="close">CLOSE</span>
换句话说,我不希望关闭链接一直显示,关闭链接应该在 modal os 关闭时隐藏,并在 modal 打开时显示。
here is my code below, can I please get a working javascript example.下面是我的代码,我可以得到一个有效的 javascript 示例吗?
Any help would be greatly appreciated任何帮助将不胜感激
function closeModal() {
modal.style.display = "none";
}
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
for (let closeBtn of spans) {
closeBtn.onclick = closeModal;
}
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>```
Just add to your show/hide function appropriate hide/show span:只需将适当的隐藏/显示跨度添加到您的显示/隐藏功能:
Change closeModal() to:将 closeModal() 更改为:
function closeModal() {
modal.style.display = "none";
spans[0].style.display = "block";
}
and change btn.onclick to:并将 btn.onclick 更改为:
btn.onclick = function() {
modal.style.display = "block";
spans[0].style.display = "none";
}
I see you are using getElementsByClassName()
which is returning (always) array of results (thats why I'm using index ([0]) to access found element).我看到你正在使用
getElementsByClassName()
它返回(总是)结果数组(这就是为什么我使用索引([0])来访问找到的元素)。 If I were you I would add new id to the span so you can be sure what you target.如果我是你,我会在 span 中添加新的id ,这样你就可以确定你的目标是什么。
Have a look at Changing HTML style看看改变 HTML 样式
If I understand you correctly.如果我理解正确的话。 Try this:
尝试这个:
function closeModal() {
modal.style.display = "none";
for (let closeBtn of spans) {
closeBtn.style.display = 'none';
}
}
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
for (let closeBtn of spans) {
closeBtn.onclick = closeModal;
closeBtn.style.display = 'none';
}
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
for (let closeBtn of spans) {
closeBtn.style.display = 'inline';
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
for (let closeBtn of spans) {
closeBtn.style.display = 'none';
}
}
}
</script>```
It would be better if we put out the repeating code in separate functions.如果我们将重复代码放在单独的函数中会更好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.