Модальное окно на html и анимация без плагинов и библиотек. Dialog html

[@igor_piro]

Моё почтение автору. Коротко и понятно.

[@EvgenyTalagaev]

Очень приятная и красивая речь у автора, слушаю и смотрю с удовольствием.
Спасибо.

[@types2872]

Как раз хотел узнать как сделать модальное окно, огромное спасибо тебе за такие классные ролики, все по существу, четко и понятно объясняешь)

[@VIMPdev]

Пожалуйста)

[@АхалайМахалай-ж1у]

Полторы тысячи подписчиков, а уровень неплох. Продолжай, не забрасывай.

[@VIMPdev]

Спасибо

[@yurkaronin]

Интересный новый тег. Хоть и экспериментальный. Но поддержка у него уже больше 80%.
Так что попробую на каком нибудь проекте применить.
Спасибо автору.

[@johncorven]

Доходчиво и интересно подал тему, спасибо. А то я модалку создавал через div и манипуляции со свойством display. Теперь этот способ опробую)

[@bollgade]

Было и правда, интересно и полезно

[@VIMPdev]

Это радует)

[@pitergarin7034]

Скажу только одно-молодец!!!!

[@sergejchap62]

👏100500 Тима показал как это сделать. Спасибо!
@keyframes наверное лучше не с модальными окнами, а с пикчами или банерами. Хотя это уже к предпочтениям или даже заказам.

[@AndroidNewsBase]

Отличное видео, спасибо за подробное объяснение

[@Olgitatata]

Спасибо 👍

[@dibof228]

Тег удобный, но он поддерживает только очень современные браузеры к сожалению

[@FalCoNrevival]

Как менять модельное окно?
Сделать его типо другого дизайна, фигуры

[@ГалинаХудиеа]

💯💯💯💯💯💯💯💯💯💯

[@РашидАмерханов]

подскажи, пожалуйста, как называется тема vs code? очень понравилась)

[@VIMPdev]

Github dark

[@GOOD-MAN-5]

А как сделать чтобы оно вылазило при загрузки страницы?

[@SolarRezerv]

Привет, не могу разобраться как делать несколько модальных окон с разным содержимым

[@VIMPdev]

Привет. Самое простое что можно сделать это продублировать весь код и изменить классы.

[@SolarRezerv]

@@VIMPdev при таком подходе, скрипт открывает на всех кнопках первую модалку. Все остальные игнорирует

[@VIMPdev]

Так я ж говорю дублировать нужно весь код и js в том числе и менять классы. Это простой подход но не совсем хороший. Я так понимаю что у вас знания js минимальны. Тут нужно некоторое понимание выборки элементов в js

[@SolarRezerv]

Я учусь, прошел , пока, курс вёрстки, скоро защита первого курса и начинается js. Поэтому готовый скрипт взял, и переменные туда писал и атрибуты, открывается только первая модалка, а на странице их должно быть 8 шт

[@68ytka68]

@@SolarRezerv к кнопке и модалке добавляешь айдишники через id. Для модалки добавляешь доп.атрибут data-button
Далее функция
function modalControl( button_id, modal_id ) {
const btn = document.getElementById( button_id );
const modal = document.getElementById( modal_id );
if ( modal.getAttribute( 'data-button' ) === btn ) {
Код модалки
}
}
Вызываем функцию скок надо раз)
modalControl( "id1", "id2" );
Решение, конечно, не идеал, но задачу твою может и решит.

[@aleksandr95]

Фича довольна интересная, но уж слишком много нюансов при стилизации, как по мне.

[@VIMPdev]

Ну не знаю. Можно заготовку себе сделать и кинуть в снипеты и все) не обязательно каждый раз прописывать одно и то же)

[@aleksandr95]

@@VIMPdev в принципе да, сижу сейчас ковыряюсь в этом. Ролик о том, как сделать второе окно будет? К примеру окно авторизации и регистрации.

[@VIMPdev]

Не. Второе окно делает так же как и первое. А если есть понимания js то написать универсальный скрипт труда не составит

[@aleksandr95]

@@VIMPdev капнул ещё глубже, можно сделать сколько угодно модальных окон таким образом без JS. Довольно занимательно.