Question

我正在尝试仅使用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类被切换，但可见性仍然隐藏。那么我错过了什么？

Answer 1

目前，您正在使用

.popup-form .show {
visibility: visible;
}

但你必须像这样使用

.popup-form.show {
visibility: visible;
}

Answer 2

额外的空间是问题所在。

.popup-form .show vs .popup-form.show

<style>
.popup-form {
   visibility: hidden;
}

.popup-form.show {
    visibility: visible;
}
</style>

Answer 3

喜欢这个吗？

由于课程popup-form和show位于同一元素中，因此您需要更改以下CSS。

<强> CSS：

.popup-form {
   visibility: hidden;
}

.popup-form.show {
    visibility: visible;
}

这里的第二个CSS意味着。获取包含类popup-form和show的元素。在你做之前是：

.popup-form {
   visibility: hidden;
}

.popup-form .show {
    visibility: visible;
}

获取具有父元素popup-form的元素，并获取具有show类的子元素。

<强>段：

＆＃13;

function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
}

＆＃13;

.popup-form {
   visibility: hidden;
}

.popup-form.show {
    visibility: visible;
}

＆＃13;

<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">

<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>

</script>
</html>

＆＃13;

切换css类不会更改可见性值

3 个答案: