Сделать модал без Javascript - PullRequest
Новая
       1

Сделать модал без Javascript

0 голосов
/ 25 февраля 2019

Как сделать модальные без кода 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>

1 Ответ

0 голосов
/ 25 февраля 2019

очень очень просто, как это 

* {
  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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...