Модальное окно на html и анимация без плагинов и библиотек. Dialog html
HTML-код
- Опубликовано: 21 сен 2024
- Делаем модальное окно без сторонних плагинов и библиотек на чистом html. Рассмотрим работу тега dialog и как его анимировать
Верстку для обзора отправлять сюда:
t.me/joinchat/...
Обзор верстки подписчиков #2
• Обзор верстки подписчи...
Продвинутая адаптивная верстка - CSS container queries
• Продвинутая адаптивная...
Минимум CSS кода для адаптивной верстки
• Минимум CSS кода для а...
Верстка адаптивного сайдбара
• Верстка адаптивного са...
Привет! Меня зовут Тима и на этом канале я показываю и рассказываю как верстать современные сайты. Делюсь интересными и полезными фишками этого ремесла. Так же регулярно выпускаю видео с разбором верстки подписчиков, указываю на их ошибки и предлагаю способы их решения. Не забывайте поддерживать канал подпиской и лайком, а так же заглядывайте в мой телеграм канал. Там я публикую ссылки на полезные сервисы и макеты для практики верстки.
Телеграм:
t.me/vimpdev
Инстаграм
/ vimpdev
ВК:
bit.ly/3m33aku
#html #css #frontend
Моё почтение автору. Коротко и понятно.
Как раз хотел узнать как сделать модальное окно, огромное спасибо тебе за такие классные ролики, все по существу, четко и понятно объясняешь)
Пожалуйста)
Очень приятная и красивая речь у автора, слушаю и смотрю с удовольствием.
Спасибо.
Полторы тысячи подписчиков, а уровень неплох. Продолжай, не забрасывай.
Спасибо
Интересный новый тег. Хоть и экспериментальный. Но поддержка у него уже больше 80%.
Так что попробую на каком нибудь проекте применить.
Спасибо автору.
Доходчиво и интересно подал тему, спасибо. А то я модалку создавал через div и манипуляции со свойством display. Теперь этот способ опробую)
Было и правда, интересно и полезно
Это радует)
Отличное видео, спасибо за подробное объяснение
Скажу только одно-молодец!!!!
Тег удобный, но он поддерживает только очень современные браузеры к сожалению
👏100500 Тима показал как это сделать. Спасибо!
@keyframes наверное лучше не с модальными окнами, а с пикчами или банерами. Хотя это уже к предпочтениям или даже заказам.
Спасибо 👍
💯💯💯💯💯💯💯💯💯💯
Как менять модельное окно?
Сделать его типо другого дизайна, фигуры
подскажи, пожалуйста, как называется тема vs code? очень понравилась)
Github dark
Фича довольна интересная, но уж слишком много нюансов при стилизации, как по мне.
Ну не знаю. Можно заготовку себе сделать и кинуть в снипеты и все) не обязательно каждый раз прописывать одно и то же)
@@VIMPdev в принципе да, сижу сейчас ковыряюсь в этом. Ролик о том, как сделать второе окно будет? К примеру окно авторизации и регистрации.
Не. Второе окно делает так же как и первое. А если есть понимания js то написать универсальный скрипт труда не составит
@@VIMPdev капнул ещё глубже, можно сделать сколько угодно модальных окон таким образом без JS. Довольно занимательно.
А как сделать чтобы оно вылазило при загрузки страницы?
Привет, не могу разобраться как делать несколько модальных окон с разным содержимым
Привет. Самое простое что можно сделать это продублировать весь код и изменить классы.
@@VIMPdev при таком подходе, скрипт открывает на всех кнопках первую модалку. Все остальные игнорирует
Так я ж говорю дублировать нужно весь код и js в том числе и менять классы. Это простой подход но не совсем хороший. Я так понимаю что у вас знания js минимальны. Тут нужно некоторое понимание выборки элементов в js
Я учусь, прошел , пока, курс вёрстки, скоро защита первого курса и начинается js. Поэтому готовый скрипт взял, и переменные туда писал и атрибуты, открывается только первая модалка, а на странице их должно быть 8 шт
@@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" );
Решение, конечно, не идеал, но задачу твою может и решит.