Как сделать модальное окно на JS?

  Переглядів 11,289

Просто: разработка

Просто: разработка

3 роки тому

В этом видео я покажу как с 0 сделать очень крутое модальное окно. Пройдёмся по вёрстке и затем по JS. Так же, покажу как написать утилиту, которая проверяет ширину скролла браузера. А ещё, познакомимся с ResizeObserver. Другими словами, в данном видео очень много полезной информации!
Про ResizeObserver:
developer.mozilla.org/en-US/d...

КОМЕНТАРІ: 60
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
😎 Получить исходники и другие преимущества - boosty.to/prostorazrabotka ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/
@hjetwd
@hjetwd 3 роки тому
Хотел побухтеть по поводу нейминга, структуры и прочего, но ты сказал "не ругайте меня" и я передумал =))))
@alexanderalexander7722
@alexanderalexander7722 3 роки тому
Побольше JS - как раз то что нужно! Отличный и мегаполезный урок. Так что огромный СПС! PS: Отдельное спасибо за ResizeObserver, так как все что нашел про него на английском, а учиться на английском еще то удовольствие
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
А придется.. без него сложновато будет
@skatler5741
@skatler5741 Рік тому
Я думал , что я один такие длинные классы делаю , а как оказалось у меня еще все в порядке с этим )
@LiSenber
@LiSenber 8 місяців тому
Лайк и комментарий в поддержку канала, спасибо за урок!
@Lezgiboy
@Lezgiboy 3 роки тому
Считал, что имею базовые знания по CSS, но в этом видео впервые увидел несколько вещей, например, использование переменных и объявление классов через &. Видимо я учил CSS по устаревшим материалам. Спасибо за видео и привет из Баку!
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Это SCSS, если что, который конвертируется посредством галпа в CSS
@hjetwd
@hjetwd 3 роки тому
автор видео пишет на scss, это вид языка sass. в scss переменные начинаются со знака $ (доллар), в обычном css переменные начинаются с двух тире - -
@mirjavkhardjavkharov2508
@mirjavkhardjavkharov2508 3 роки тому
Читаешь мысли) Спасибо за урок
@user-tb3mm6dl3z
@user-tb3mm6dl3z 10 місяців тому
О Виталий наконец то я искал именно твое видео
@sid_dis
@sid_dis 3 роки тому
Как всегда то, что нужно 👍🏻
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Спасибо
@serhiikorniichuk865
@serhiikorniichuk865 3 роки тому
Очень полезный видос, спасибо! Так же отдельное спасибо за лайфхак с "$parent: &")
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Сразу видно, не все видео смотрели. Он всплывал уже не раз -)
@serhiikorniichuk865
@serhiikorniichuk865 3 роки тому
@@prosto_razrabotka примерно 80% просмотрел точно) где то упустил этот момент...
@user-iy2hd6ix9j
@user-iy2hd6ix9j 2 роки тому
Хорошие уроки! продолжайте в том же духе и не останавливайтесь) Спасибо!
@melomalo1682
@melomalo1682 2 роки тому
Пожалуйста продолжайте снимать - оч круто рассказываете 😎. Надеюсь увидеть больше ваших видео. Например как бы делали верстку видеоплеера при определённом разрешении
@kotlancer
@kotlancer 3 роки тому
Лайк нажал, коммент написал, теперь смотреть видос
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Всё чётко сделал -) Спасибо)
@syimykamatov8955
@syimykamatov8955 3 роки тому
Благодарю
@UrumovKonstantin
@UrumovKonstantin 3 роки тому
Как всегда контент - 🔥🔥🔥! p.s. может стоит попробовать eCSStractor?
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Я довольно умело обращаюсь с хоткеями, не вижу в нём особой необходимости
@eugeneXXI
@eugeneXXI 3 роки тому
Если тени не появляются в модальном окне, в чем причина? (Это с учетом добавки bindResizeObserver(modal) в open).
@daniilthegunner843
@daniilthegunner843 3 роки тому
Покажи пожалуйста как реализовать кнопку "показать ещё". Просто при получении данных с сервера слайсом массив обрезать? Таким образом разве не все данные сразу приходят? Хотелось бы чтобы по нужному количеству приходило
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
В запросе в параметрах нужно указывать кол-во получаемых элементов и индекс, начиная с какого
@lackevil3730
@lackevil3730 3 роки тому
Лайк носом!
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Надеюсь, руки заняты написанием кода -)
@eugenenovikov671
@eugenenovikov671 3 роки тому
@@prosto_razrabotka щас на порнхабе видео досмотрю и освобожу руки. а вообще спасибо большое за видео
@sergeypr5521
@sergeypr5521 3 роки тому
Большое спасибо за офигенную модалочку, то что нужно было!! Но увы вернуть скрол после закрытия модалки не выходит.. попробую завтра(
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Если так и не разобрались - заглядывайте в телеграм чат -)
@boldureans
@boldureans 3 роки тому
🤘
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
(o˘◡˘o)
@anv7259
@anv7259 Рік тому
вы куда пропали???такие полезные ролики у вас были
@user-tb3mm6dl3z
@user-tb3mm6dl3z 10 місяців тому
🤝🤝
@MrGlack18
@MrGlack18 3 роки тому
Круто. Но у меня внутри модалки почему-то не сработали стили на header, body и footer.
@saburchik7111
@saburchik7111 3 роки тому
Есть ньанс при header fixed. На него данный скрипт не действует, оно и понятно почему. Было бы здорово, если кто подсказал - куда и как дописать пару строк для header
@LRXAORLOV
@LRXAORLOV 3 роки тому
Есть ещё хаки со скролом )? А то такая боль всегда с ним)
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Эм. Это универсальная штука, что ещё может быть?
@sanzharbazarbek7203
@sanzharbazarbek7203 3 роки тому
У вас nginx или apache?
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Проще. Browser-sync в галпе. Моя сборка есть в видео на канале. Она простейшая
@user-du7cl4ll9x
@user-du7cl4ll9x 3 роки тому
А можешь сделать видео как делать чипсы на js?
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Я ж не повар..))
@lisofsky8151
@lisofsky8151 3 роки тому
исходник ! мне нужны исходники окей гугл как хакнуть boosty.....
@user-tb3mm6dl3z
@user-tb3mm6dl3z 10 місяців тому
А зачем слеш между ссылками🤔🤔🤔
@user-tb3mm6dl3z
@user-tb3mm6dl3z 10 місяців тому
а все понял😌
@olegonkos
@olegonkos 3 місяці тому
@@user-tb3mm6dl3z ну и зачем?
@boldureans
@boldureans 3 роки тому
Опять код... Ни мандаринов, ни гирлянд
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Ээээй, там есть ёлочка светящаяся!
@alym.aleksey
@alym.aleksey 3 роки тому
Создать функцию, которая узнает размер скроллбара путём создания нового элемента в доме - это за гранью добра и зла. Неужели на проде ты такое делаешь?
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Есть несколько способов узнать ширину скролла. Это один из них. Что конкретно в этом способе не так, по вашему мнению?
@alym.aleksey
@alym.aleksey 3 роки тому
@@prosto_razrabotka зачем лишний раз грузить дом и делать ререндер страницы, есть более элегантное решение в 1 строку. Это мелочи, но если можно узнать этот размер одной строчкой без создания лишней ноды на странице
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Какой строчкой? Дайте конкретику, пожалуйста.
@alym.aleksey
@alym.aleksey 3 роки тому
@@prosto_razrabotka window.innerWidth - document.documentElement.clientWidth; Проверьте в разных браузерах и на разных ОС вывести значение этого выражения и вашей функции, будут ли расхождения, но сомневаюсь. Я пишу сейчас универсаный плагин модального окна, просмотрел много плагинов, просмотрел много видео на эту тему, так как у вас я вижу впервые, хотя и рабочий вариант, на стековерфлоу это самое популярное решение, но 5 лет назад
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Раз уж вы сослались на СО, то почитайте комменты. Предложенное вами решение потенциально может не отработаться, если у боди и хтмл оверфлоу хидден. Написанное же мной более универсальное
@Seacrest.
@Seacrest. 3 роки тому
А еще привычка говорить хейт а не хайт
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Ну... что поделать.. какой есть -)
2.1 backend express js основы
9:46
IT village
Переглядів 37
Не пей газировку у мамы в машине
00:28
Даша Боровик
Переглядів 1,7 млн
Модальное окно (popup) практика HTML CSS JavaScript
28:57
Онлайн-школа METHED
Переглядів 14 тис.
Как сделать Квиз (Quiz / Викторина / Опрос) на JS?
56:48
Просто: разработка
Переглядів 32 тис.
#5 МОДАЛЬНОЕ ОКНО на Javascript
37:22
Как стать программистом
Переглядів 10 тис.
How To Make Toggle Button Using HTML & CSS
5:27
MakeTechStuff
Переглядів 60 тис.
JS-решения №2. Модальные окна на чистом JS
14:20
MaxGraph - cайты как страсть
Переглядів 22 тис.
Верстка звездатого рейтинга
8:36
Просто: разработка
Переглядів 14 тис.
HTML & CSS практика | Модальное окно
10:52
AVIS TV
Переглядів 31 тис.