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

Поделиться
HTML-код
  • Опубликовано: 12 ноя 2024

Комментарии • 60

  • @prosto_razrabotka
    @prosto_razrabotka  3 года назад +1

    😎 Получить исходники и другие преимущества - 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 года назад +7

    Хотел побухтеть по поводу нейминга, структуры и прочего, но ты сказал "не ругайте меня" и я передумал =))))

  • @alexanderalexander7722
    @alexanderalexander7722 3 года назад +3

    Побольше JS - как раз то что нужно! Отличный и мегаполезный урок. Так что огромный СПС!
    PS: Отдельное спасибо за ResizeObserver, так как все что нашел про него на английском, а учиться на английском еще то удовольствие

    • @prosto_razrabotka
      @prosto_razrabotka  3 года назад +1

      А придется.. без него сложновато будет

  • @Degatino
    @Degatino 3 года назад +1

    Считал, что имею базовые знания по CSS, но в этом видео впервые увидел несколько вещей, например, использование переменных и объявление классов через &. Видимо я учил CSS по устаревшим материалам. Спасибо за видео и привет из Баку!

    • @prosto_razrabotka
      @prosto_razrabotka  3 года назад +1

      Это SCSS, если что, который конвертируется посредством галпа в CSS

    • @hjetwd
      @hjetwd 3 года назад +2

      автор видео пишет на scss, это вид языка sass. в scss переменные начинаются со знака $ (доллар), в обычном css переменные начинаются с двух тире - -

  • @skatler5741
    @skatler5741 2 года назад +1

    Я думал , что я один такие длинные классы делаю , а как оказалось у меня еще все в порядке с этим )

  • @serhiikorniichuk865
    @serhiikorniichuk865 3 года назад +3

    Очень полезный видос, спасибо! Так же отдельное спасибо за лайфхак с "$parent: &")

    • @prosto_razrabotka
      @prosto_razrabotka  3 года назад

      Сразу видно, не все видео смотрели. Он всплывал уже не раз -)

    • @serhiikorniichuk865
      @serhiikorniichuk865 3 года назад

      @@prosto_razrabotka примерно 80% просмотрел точно) где то упустил этот момент...

  • @melomalo1682
    @melomalo1682 3 года назад

    Пожалуйста продолжайте снимать - оч круто рассказываете 😎. Надеюсь увидеть больше ваших видео. Например как бы делали верстку видеоплеера при определённом разрешении

  • @LiSenber
    @LiSenber Год назад

    Лайк и комментарий в поддержку канала, спасибо за урок!

  • @UrumovKonstantin
    @UrumovKonstantin 3 года назад +1

    Как всегда контент - 🔥🔥🔥!
    p.s. может стоит попробовать eCSStractor?

    • @prosto_razrabotka
      @prosto_razrabotka  3 года назад

      Я довольно умело обращаюсь с хоткеями, не вижу в нём особой необходимости

  • @СергейК-б6н
    @СергейК-б6н Год назад

    О Виталий наконец то я искал именно твое видео

  • @ДмитрийМельников-ъ3в

    Хорошие уроки! продолжайте в том же духе и не останавливайтесь) Спасибо!

  • @kotlancer
    @kotlancer 3 года назад +2

    Лайк нажал, коммент написал, теперь смотреть видос

  • @sid_dis
    @sid_dis 3 года назад +3

    Как всегда то, что нужно 👍🏻

  • @mirjavkhardjavkharov2508
    @mirjavkhardjavkharov2508 3 года назад +1

    Читаешь мысли)
    Спасибо за урок

  • @anv7259
    @anv7259 2 года назад

    вы куда пропали???такие полезные ролики у вас были

  • @sergeypr5521
    @sergeypr5521 3 года назад +3

    Большое спасибо за офигенную модалочку, то что нужно было!! Но увы вернуть скрол после закрытия модалки не выходит.. попробую завтра(

    • @prosto_razrabotka
      @prosto_razrabotka  3 года назад

      Если так и не разобрались - заглядывайте в телеграм чат -)

  • @eugeneXXI
    @eugeneXXI 3 года назад +1

    Если тени не появляются в модальном окне, в чем причина? (Это с учетом добавки bindResizeObserver(modal) в open).

  • @daniilthegunner843
    @daniilthegunner843 3 года назад +2

    Покажи пожалуйста как реализовать кнопку "показать ещё". Просто при получении данных с сервера слайсом массив обрезать? Таким образом разве не все данные сразу приходят? Хотелось бы чтобы по нужному количеству приходило

    • @prosto_razrabotka
      @prosto_razrabotka  3 года назад +2

      В запросе в параметрах нужно указывать кол-во получаемых элементов и индекс, начиная с какого

  • @syimykamatov8955
    @syimykamatov8955 3 года назад +1

    Благодарю

  • @lackevil3730
    @lackevil3730 3 года назад +3

    Лайк носом!

    • @prosto_razrabotka
      @prosto_razrabotka  3 года назад +1

      Надеюсь, руки заняты написанием кода -)

    • @eugenenovikov671
      @eugenenovikov671 3 года назад

      @@prosto_razrabotka щас на порнхабе видео досмотрю и освобожу руки. а вообще спасибо большое за видео

  • @MrGlack18
    @MrGlack18 3 года назад

    Круто. Но у меня внутри модалки почему-то не сработали стили на header, body и footer.

  • @saburchik7111
    @saburchik7111 3 года назад +1

    Есть ньанс при header fixed. На него данный скрипт не действует, оно и понятно почему.
    Было бы здорово, если кто подсказал - куда и как дописать пару строк для header

  • @LRXAORLOV
    @LRXAORLOV 3 года назад +1

    Есть ещё хаки со скролом )? А то такая боль всегда с ним)

    • @prosto_razrabotka
      @prosto_razrabotka  3 года назад

      Эм. Это универсальная штука, что ещё может быть?

  • @РувишаШокун
    @РувишаШокун 3 года назад +1

    А можешь сделать видео как делать чипсы на js?

  • @СергейК-б6н
    @СергейК-б6н Год назад

    🤝🤝

  • @boldureans
    @boldureans 3 года назад +1

    🤘

  • @lisofsky8151
    @lisofsky8151 3 года назад

    исходник ! мне нужны исходники
    окей гугл как хакнуть boosty.....

  • @sanzharbazarbek7203
    @sanzharbazarbek7203 3 года назад +1

    У вас nginx или apache?

    • @prosto_razrabotka
      @prosto_razrabotka  3 года назад +2

      Проще. Browser-sync в галпе. Моя сборка есть в видео на канале. Она простейшая

  • @boldureans
    @boldureans 3 года назад +4

    Опять код... Ни мандаринов, ни гирлянд

    • @prosto_razrabotka
      @prosto_razrabotka  3 года назад

      Ээээй, там есть ёлочка светящаяся!

  • @alym.aleksey
    @alym.aleksey 3 года назад +1

    Создать функцию, которая узнает размер скроллбара путём создания нового элемента в доме - это за гранью добра и зла. Неужели на проде ты такое делаешь?

    • @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 года назад

      Ну... что поделать.. какой есть -)

  • @СергейК-б6н
    @СергейК-б6н Год назад

    А зачем слеш между ссылками🤔🤔🤔