Как сделать простое модальное окно на HTML+CSS (без JS)?

Question

[Алексей]

Сейчас пользуюсь сейчас popup maker. Но для моих целей это их пушки по воробьям.
100% прозрачный задний фон
0 прозрачности окна
навешивается на элемент меню по клику (через специфический класс?)
ширина 95% от ширины экрана
отступ от верхнего края экрана 50px
высота автоматически по содержанию
вертикальный скорлинг если содержание не помещается на одном экране
внутри должен выполняться php код
кнопка закрыть (право верх)

Comments

[Андрей Хохлов]

https://freelansim.ru/

[Алексей]

Андрей Хохлов, Мне писали что это вообще очень просто... это не так?

[Ankhena]

Алексей, Алексей, если вам не просто набрать эти же вопросы в гугле или яндексе, то вообще все очень очень сложно. Для вас: waksoft.susu.ru/blog/2016/07/16/tvorcheskoe-ispolz...

[Виолетта Морозова]

В следующий раз такие штуки ищи сразу на codepen. Тут тоже не гении сидят, видимо))

Answer 1

[Islam Ibakaev]

берёшь это и приводишь в нужный вид

Comments

[Алексей]

без JS невозможно сделать?

[Islam Ibakaev]

Алексей, не знаю, я не делал. Если у тебя есть много свободного времени - можешь попробовать.

[Алексей]

Вроде писали что это самое элементарное, но вот сделать самому не получается

[Islam Ibakaev]

Алексей, когда сделать не можешь сам или время поджимает попробуй делать запрос на английском, типа "pure css popup(modal)" наверняка что-нибудь да вылезет)

[Islam Ibakaev]

ну вот, к примеру, https://github.com/jorgechavz/pure-css-modal

Answer 2

[Егор Живагин]

Посмотрите тут , мне кажется, собраны самые простые css реализации

Но вообще, вы же представляете, насколько это костыли и какой адский ад это всё поддерживать?
Разберитесь с WP, посмотрите в ютубе мануалы по подключению JS. А если надо будет что-нибудь посерьёзней модалки делать?

Comments

[Алексей]

на счет костылей не понимаю и в чем труд поддерживать?

[Егор Живагин]

Алексей, на каждую, даже небольшую модалку, придётся писать отдельный код и класть его строго в определённое место. Затем привязывать его к какой-то кнопке через checkbox и label , которые вообще элементы формы, они не предназначены для этого. Это, как минимум, лишний код.

Про поддержку - во-первых, если поддерживать будете не вы, уйдёт время чтоб понять, что вообще происходит. Во-вторых, в процессе поддержки может понадобиться, например, разложить модалку и кнопку для неё по разным блокам --> всё сломается.

А на JS это... строчек 5?
По ссылке, что я скинул, есть интересная реализация меню, да и аккордеон такой может быть полезен. Кстати, там в комментах тоже много можно узнать по поводу поддержки таких вещей.