我正在尝试仅使用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类已切换,但可见性仍然隐藏.那么我错过了什么？
小智 5
目前,您正在使用
.popup-form .show {
visibility: visible;
}
但你必须这样使用
.popup-form.show {
visibility: visible;
}