Создание модального окна без использования JavaScript

Оффтоп javascript
1

Как сделать модальное окно только с помощью HTML и CSS?

Я работаю над проектом, где нельзя использовать JavaScript, но мне нужно реализовать модальное окно. Есть ли способ создать его только с помощью HTML и CSS?

Вот пример кода, который я пытаюсь адаптировать:

<!DOCTYPE html>
<html>
<head>
  <title>Модальное окно на CSS</title>
  <style>
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.4);
    }
    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
    }
  </style>
</head>
<body>
  <button>Открыть модальное окно</button>
  <div class='modal'>
    <div class='modal-content'>
      <p>Текст модального окна</p>
    </div>
  </div>
</body>
</html>

Как мне сделать так, чтобы модальное окно открывалось и закрывалось без JavaScript? Буду благодарен за любые идеи или примеры решения!

2

Есть еще один способ - использовать директиву details/summary. Вот как это можно сделать:

<details class='modal'>
  <summary>Открыть модалку</summary>
  <div class='modal-content'>
    Содержимое модального окна
    <!-- Здесь может быть любой контент -->
  </div>
</details>

В CSS нужно будет стилизовать элементы под модалку. Плюс такого подхода - семантичность и доступность. Минус - может потребоваться больше CSS для точной стилизации. Но работает без JS, что и требовалось.

3

Да, можно сделать модальное окно без JS! Используй чекбокс и label. Примерно так:

.modal { display: none; }
#modal-toggle:checked ~ .modal { display: block; }

<label for='modal-toggle'>Открыть</label>
<input type='checkbox' id='modal-toggle'>
<div class='modal'>Содержимое</div>

Чекбокс скрываем, label стилизуем как кнопку. Когда чекбокс активен, модалка показывается. Для закрытия добавь еще один label внутрь модалки.

4

не могу не согласиться с предыдущим ответом - чекбокс и лейбл реально крутой способ! но еще один вариант который я недавно узнал - использовать псевдокласс :target. работает так:

<a href='#modal'>открыть</a>
<div id='modal' class='modal'>
  <div class='modal-content'>
    текст
    <a href='#'>закрыть</a>
  </div>
</div>

.modal { display: none; }
.modal:target { display: block; }

когда кликаешь по ссылке, url меняется и модалка открывается. а закрывается при клике на любую другую ссылку. просто и удобно!