html - 不用 Javascript 制作模态-6ren

html - 不用 Javascript 制作模态

转载作者：行者123 更新时间：2023-11-28 14:24:23

28

4

如何在没有 javascript 代码的情况下仅使用 html 和 css 制作模态？

我有一个无法使用 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>

最佳答案

像这样非常非常简单

* {
  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>

关于html - 不用 Javascript 制作模态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54872125/

28

4

0

文章推荐： javascript - IE 提示 JS 语法错误，但在其他浏览器上工作

文章推荐： javascript - 如何在嵌套组件中处理 EmberJS 中的操作

文章推荐： css - 将::-webkit-scrollbar 应用于除一个元素之外的所有元素

angularjs - 什么是 Angular 态？
我来自 Asp.Net 世界，试图理解 Angular State 的含义。什么是 Angular 状态？它类似于Asp.Net中的ascx组件吗？是子页面吗？它类似于工作流程状态吗？我听到很多人
javascript - 3 态 CSS 拨动开关
我一直在寻找 3 态拨动开关，但运气不佳。基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始，一旦用户向左或向右滑动，就无法回到N/A(未回答)状态。有人

首页

博学

6Ren·AI

商城

html - 不用 Javascript 制作模态