Question

如何仅使用html和css而不使用javascript代码来制作模态？

我有一个不能使用javascript的项目，需要模式。

<!DOCTYPE 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">
<body>

<div class="w3-container">
  <h2>W3.CSS Modal</h2>
  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal</button>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Answer 1

像这样非常简单

* {
  font-family:"Segoe UI",sans-serif;
}

input[type='checkbox']{
  display:none;
}

#btn {
  padding:5px 10px;
  background: yellowgreen;
  color:#fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform:translate(-50%,-50%);
}

#cnt {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: hotpink;
  top: 0;
  left: 0;
  display:flex;
  align-items:center;
  justify-content: center;
  pointer-events:none;
  display:none;
}

.close {
  position: fixed;
  top: 20px;
  right: 20px;
  display:none;
  cursor:pointer;
}

input:checked + div + #cnt {
  display:flex;
}

input:checked + div + #cnt + .close {
  display:block;
}

<label>
  <input type="checkbox">
  <div id="btn">OPEN</div>
  <div id="cnt">SOME CONTENT</div>
  <div class="close">X</div>
</label>

使模态不使用Javascript

1 个答案: