我可以让模态消失,但我不能让它出现
I can make a modal disappear, but I can't make it appear
我在 JavaScript 中有这段代码试图更改 CSS 中的 属性 “visibility: hidden;”对于“可见性:none;”单击按钮
const modal = document.getElementById('modal');
const button = document.getElementById('button');
button.addEventListener('click', function(){modal.style.visibility = "none";})
这段代码可以让模态框消失,但不能让它出现
这是模态 CSS 属性:
#modal{
margin: 5px 20px;
padding: 20px 20px;
position: absolute;
top: 105px;
right: 5px;
width: 250px;
height: 150px;
background-color: lightgreen;
border-radius: 10px;
color: darkgreen;
align-items: center;
border: 4px solid darkgreen;
visibility: hidden;
}
可见性有 2 个有效值:
hidden
: 隐藏元素
visible
: 显示元素
如果您希望您的元素在点击时出现:您需要更改为使用 visible
:
button.addEventListener('click', function(){modal.style.visibility = "visible";})
此外,我建议您使用 display
属性 代替:
block
: 显示元素
none
: 隐藏元素
补充阅读:What is the difference between visibility:hidden and display:none?
我在 JavaScript 中有这段代码试图更改 CSS 中的 属性 “visibility: hidden;”对于“可见性:none;”单击按钮
const modal = document.getElementById('modal');
const button = document.getElementById('button');
button.addEventListener('click', function(){modal.style.visibility = "none";})
这段代码可以让模态框消失,但不能让它出现
这是模态 CSS 属性:
#modal{
margin: 5px 20px;
padding: 20px 20px;
position: absolute;
top: 105px;
right: 5px;
width: 250px;
height: 150px;
background-color: lightgreen;
border-radius: 10px;
color: darkgreen;
align-items: center;
border: 4px solid darkgreen;
visibility: hidden;
}
可见性有 2 个有效值:
hidden
: 隐藏元素visible
: 显示元素
如果您希望您的元素在点击时出现:您需要更改为使用 visible
:
button.addEventListener('click', function(){modal.style.visibility = "visible";})
此外,我建议您使用 display
属性 代替:
block
: 显示元素none
: 隐藏元素
补充阅读:What is the difference between visibility:hidden and display:none?