我正在尝试仅使用 CSS 和 JavaScript 显示弹出表单。
这是我的 HTML 页面:
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.popup-form {
visibility: hidden;
}
.popup-form .show {
visibility: visible;
}
</style>
<body>
<div class="popup-form show" id="myPopup">
<form>
<div class="w3-container">
<br> <input class="w3-input" placeholder="Enter category name" />
<br> <input class="w3-input"
placeholder="Enter category discription" />
</div>
<div class="w3-container w3-right">
<button class="w3-button w3-black w3-round-large" type="submit">Add</button>
<button class="w3-button w3-black w3-round-large" type="submit">Cancel</button>
</div>
</form>
</div>
<div onclick="myFunction()"><i class="fa fa-plus-circle w3-button"></i></div>
</body>
<script>
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
</html>我可以在控制台中看到 .show 类已切换，但可见性保持隐藏状态。那么我缺少什么？
最佳答案
目前，您正在使用
.popup-form .show {
visibility: visible;
}
但是你必须这样使用
.popup-form.show {
visibility: visible;
}
关于html - 切换 css 类不会改变可见性值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46251174/