Модальное окно на чистом HTML без JavaScript

[daundaun]

Модалка на чистом html без js, но используется onclick

[ИмяФамилия-эфв]

Обычно "можно сделать без JS, при помощи чистого HTML/CSS" - это шляпа. Сначала все, вроде, неплохо. А потом начинается: "ой, а это свойство поменять нельзя", "ой, а то поведение поменять нельзя". Заканчивается, обычно, одинаково: "сделаннон без JS" летит в помойку, и берется библиотека на JS 😂

[Demon]

Вот вам модалка на чистом CSS

<div>
<input type="checkbox" id="menu">
<label for="menu">Menu</label>
<div class="modal">
Modal Window!
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias deserunt, doloremque dolores dolorum eaque eligendi
esse facilis in magni minima molestiae, nesciunt, nisi nostrum quam quod reiciendis velit voluptate voluptatum.
</p>


* {
font-family: sans-serif;
font-size: 24px;
}

#menu {
opacity: 0;
}

#menu + label {
position: relative;
user-select: none;
cursor: pointer;
z-index: 999;
}

#menu + label:before {
content: '=';
display: inline-block;
text-align: center;
margin-right: 8px;
margin-left: -16px;
width: 40px;
border-radius: 4px;
border: 1px solid #2196F3;
background: #BBDEFB;
color: #2196F3;
}

#menu:checked + label:before {
content: 'x';
}

.modal {
display: flex;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
align-items: center;
justify-content: center;
backdrop-filter: blur(5px);
background: rgba(127, 255, 212, 0);
transform: translateY(-100%);
transition: all 0.3s ease-in-out;
z-index: 998;
}

#menu:checked + label + .modal {
background: rgba(127, 255, 212, 0.8);
transform: translateY(0);
}

[sergejchap]

если в html вставить JS, никто не сомневается - можно

[inlovehArd]

Потому что у диалога браузерная поддержка так себе. Потому и юзаем дивы

[vladwolf]

а если нужна анимация для этого окна, цвет заднего фона?

[virnus]

а зачем делать попапы на css если все это можно написать при помощи js?

[АлексейК-кк]

Зачем учить и городить костыли на html, когда можно просто и удобно написать это на JS?

[LiFlx]

Зачем заморачиваться с этим в html, если при верстке большого функционального сайта все равно прийдется использовать Js, вытаскивать dom и работать там,
Это же банально неудобно?😃

[ЕвгенийРаспопов-ьи]

Было бы хорошо добавлять выдержу из caniuse в ролик. Я проверил и поддержка 96%. Какие есть возможности у css в плане поддержки анимаций?

[MsDevil]

Почему в комментах так не любят модалки?

[Name-xzsw]

Куруто, а если мне статистику по открытию модалки надо собрать, шо мне делать ? xD )

[ИванШаталов-ъй]

❤❤❤❤❤❤❤- (конечно речь не программировании)))

[denchikdepovskoi]

А если у меня семерка, возможности нет поставить более новую версию, что делать?

[neveren]

Навалила кринжа. Onclick это событие HTML?

[Lucioa]

И сидишь такой, C# разработчик, и думаешь... джава скрипт? хтмл? нафига? :D

[Чинчопа-ыз]

Здравствцуйте подскажите а it МАГИСТАРУТРА вообще нужна где-либо. очень важный для меня вопрос. хочу забрать документы, ибо не понимаю для чего она. it бакалавр у меня уже есть

[danilafipsk]

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

[piteronline]

Если у вас нормальный сайт, то не делайте так никогда. Поисковики не любят джаваскрипты, они их попросту игнорируют. А следовательно вы теряете дополнительный контент/элемент на странице, который мог бы усиливать эту страницу. Реже слушайте программистов, делайте как надо, а не как хотите или как удобней.

[dezrelay]

Я бы поставил лайк, но за всплывающие окна, Я бы давал РАССТРЕЛ!!! Программирование дело конечно хорошее и нужное, но изобретатель всплывающих окон, будет гореть в аду!!! Как и каждый программист, который сделал всплывающие окно, даже одно!!! Я тут культурно ещё постарался выразиться!!!