Попап, всплывающее окно на чистом JavaScript

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

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

  • @NinaSergeevna
    @NinaSergeevna Месяц назад

    Да, такой формат подходит для меня как не для новичка, я узнаю у тебя новинки. Спасибо 🥰

  • @KIREKSSHOW
    @KIREKSSHOW 2 месяца назад +2

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

    • @vadymprokopchuk
      @vadymprokopchuk  2 месяца назад +2

      Спасибо, мне очень приятно

  • @andreasshev5748
    @andreasshev5748 Месяц назад

    С днём рождения! Здоровья!

  • @cao_dzecbi
    @cao_dzecbi 2 месяца назад +2

    Вадим, с Днем Рождения!
    Спасибо за ролики!

  • @mishapodgorny5090
    @mishapodgorny5090 2 месяца назад +2

    Спасибо большое за твои труды. Привет из Запорожья. Твой канал уже давно стал основным источником знаний по верстке. С днем рождения. Успехов в развитии канала и всего наилучшего.

    • @vadymprokopchuk
      @vadymprokopchuk  2 месяца назад

      Благодарю! Успехов в обучении

  • @ynesennye_milom
    @ynesennye_milom 2 месяца назад +1

    С Днем рождения, Вадим🎉🎉🎉 Спасибо вам преогромнейшее за ваш труд💐 Мне нравятся оба формата видео, с готовым кодом вполне нормально👍

    • @vadymprokopchuk
      @vadymprokopchuk  2 месяца назад

      Спасибо! и спасибо за ответ по формату

  • @olegs4418
    @olegs4418 2 месяца назад +1

    Человечище!!! Вадим с днём рождения и большого здоровья тебе. 🎉

  • @ГалинаДружинина-ъ1ъ
    @ГалинаДружинина-ъ1ъ 2 месяца назад

    С Днем Рождения, Вадим!!!🎉🎉🎉. Твои уроки самые лучшие!!!

  • @bessonniy9208
    @bessonniy9208 2 месяца назад

    С днем рождения! Спасибо за потрясающие уроки!

  • @black_light
    @black_light 2 месяца назад

    Вадос, с Днём Рождения! Желаю тебе здоровья и жизни без тревог во всех смыслах.
    П.С. Правую руку нужно беречь. Как говорил один мой бывший коллега из Харькова: «береги пальцы с молоду, в старости пригодятся».

  • @АлександрВацак
    @АлександрВацак 2 месяца назад

    С днем рождения Вадим🎉 Спасибо Тебе👍👍👍 за знания.

  • @terner_arthur
    @terner_arthur 2 месяца назад +1

    Вадос, спасибо тебе ОГРОМНОЕ за твой контент, ты делаешь БОЛЬШОЕ дело
    Береги себя и свою семью !!!

  • @Oleksandr-l9g
    @Oleksandr-l9g 2 месяца назад

    Только сейчас попал на это видео, блин на скидку не попал:)))
    С Днюхою прошедшей кстати!

  • @ВалентинаЗубарева-э6ж
    @ВалентинаЗубарева-э6ж 2 месяца назад +1

    С днем рождения, красавчик !)). Спасибо за информацию, как всегда очень полезно и прикольно). Такой формат понравился даже больше.

    • @vadymprokopchuk
      @vadymprokopchuk  2 месяца назад

      Спасибо!!! Круто, спасибо, что отписал по формату

  • @mr.president7777
    @mr.president7777 2 месяца назад

    Благодарю за современный код! 👍 И с прошедшей Денюхой, Вадим!! 🎂🍰.. поправляйся!)

  • @igorsenichev3779
    @igorsenichev3779 2 месяца назад +1

    Спасибо. И с днём рождения! 🥳🎁🎉

  • @constantineilin693
    @constantineilin693 2 месяца назад +1

    с Днем Рождения🎉 и спасибо за качественный, интересный контент. А руке пожелаю скорейшего заживления🙃🎂🍾

  • @Nebogr
    @Nebogr 7 дней назад

    мне подходит формат как было раньше.

  • @relaxyourself1609
    @relaxyourself1609 2 месяца назад +1

    С днюшкой, контент огонь.
    А нету в планах сделать такой же свой простой слайдер только на JS ? С возможностью листания слайдов мышкой и пальцем если в режиме эмуляции мобилки. И еще не плохо было бы сделать отображение количества страниц такой шкалой прогресса - круг с заполнением цветом. Или может сделать разбор какого то слайдера которым пользуешься ты с акцентированием внимания на проблемах которые я ниже описал.
    А то для начинающего даже самые простые слайдеры это жесть, я вот пробовал 3 слайдера, свайпер вообще не смог запустить, а слик и тайни.жс вроде норм но там для вывода текущего слайда какие то непонятные цифры они отдают, приходится свою ф-ю писать, а особенно не понятно в слике на первом слайде, а в тайни на последнем, если на слайде есть кнопка на нее нельзя нажать, и я пока нигде не нашел как это пофиксить уже весь мозг сломал.
    У меня есть модуль слайдера с курса по JS, очень простой но там нету возможности листать мышкой и пальцем, а прикрутить их это тот еще квест для меня.

  • @АлексейБудик-е7ь
    @АлексейБудик-е7ь 2 месяца назад

    Поздравляю с днём рождения 🎉🎉🎉

  • @roman6504
    @roman6504 2 месяца назад

    У меня на работе только в прошлом году разрешили гриды использовать а им уже сто лет в обед. Так что диалогов и шоуМодалов я только лет через пять дождусь)

  • @elenbergus
    @elenbergus 2 месяца назад +1

    С Днем Рождения 🥳🎂🍾

  • @spikalov
    @spikalov 2 месяца назад +1

    С Днём Рождения!

  • @marpusik1277
    @marpusik1277 2 месяца назад +2

    спасибо 🙏

  • @igorkroshkin9354
    @igorkroshkin9354 2 месяца назад +1

    Ни в начале не показана нормальная работа (javascript отключен), ни в конце (автор увлекся и забыл), даблшот :) Ржу не могу

  • @walterwhite4407
    @walterwhite4407 2 месяца назад

    Вадим,здарова) 1)Дякую за твій контент 2)Бережи себе! 3)Ну і з днюхою тебе==>щоб стояв і гроші були.Good luck🤞

  • @Алексей-ж4з8и
    @Алексей-ж4з8и 2 месяца назад

    С Днем Рождения!

  • @MG-iq6ri
    @MG-iq6ri 2 месяца назад +1

    автора обнимаю

  • @superdjony7660
    @superdjony7660 2 месяца назад

    С днем рождения!!!)

  • @Smirnov-w8z
    @Smirnov-w8z 2 месяца назад +1

  • @onlydropped6479
    @onlydropped6479 2 месяца назад +1

    Вадос спасибо за видос))

  • @Oleksandr-l9g
    @Oleksandr-l9g 2 месяца назад

    У меня трехсменная работа, если я не попадаю на урок, как быть в этом случае?
    Я имею ввиду ваш курс Основы JavaScript. JavaScript для верстальщика

  • @movetonjkee
    @movetonjkee 2 месяца назад

    Какой шрифт в vs code используешь*

  • @КонстантинСмирнов-ъ4ж
    @КонстантинСмирнов-ъ4ж 2 месяца назад

    Это тебе для развития навыков JS)))

  • @djdrey4539
    @djdrey4539 2 месяца назад

    круто. Но как сделать что бы модалка плавно появлялась?

    • @djdrey4539
      @djdrey4539 2 месяца назад

      .dialog {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: 0;
      width: 400px;
      display: block;
      opacity: 0;
      visibility: hidden;
      box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .8);
      transition: opacity .5s ease 0s, visibility .5s ease 0s, box-shadow .5s ease 0s;
      }
      .dialog[open] {
      opacity: 1;
      visibility: visible;
      }
      .dialog::backdrop {
      background-color: #00000000;
      }
      плавное появление модалки

  • @MentorYoudo
    @MentorYoudo 2 месяца назад

    лайк

  • @sergey_dm
    @sergey_dm 2 месяца назад +1

    Вітаю з Днем народження

  • @Anatoli-bq1pe
    @Anatoli-bq1pe 2 месяца назад

    Ты конечно меня извини, но по скроллу ну ты и наколхозил) Лови лайфхак: body:has(dialog[open])
    {overflow: hidden;}. Все это легко решается через псевдокласс :has.
    Т.е. когда отрибут open есть в теге dialog будет происходить блок скролла, соответственно когда нет - то скролл появляется. И все решение двумя строчками в css)

  • @КонстантинСмирнов-ъ4ж
    @КонстантинСмирнов-ъ4ж 2 месяца назад

    А архив скинуть не судьба?

  • @elkazmakaz5870
    @elkazmakaz5870 2 месяца назад

    Не бережете вы себя, Юрий Венедиктович

  • @FunGamesUK
    @FunGamesUK 2 месяца назад

    Вітаю із Днем народження)

  • @КонстантинСмирнов-ъ4ж
    @КонстантинСмирнов-ъ4ж 2 месяца назад

    У тебя в коде не popup, а модальное окно! Ты хоть разницу понимаешь между этими вещами?

    • @dmitriroben1101
      @dmitriroben1101 2 месяца назад

      оО, так объясни. Многим интересно будет

    • @КонстантинСмирнов-ъ4ж
      @КонстантинСмирнов-ъ4ж 2 месяца назад

      @@dmitriroben1101 В popup нет backdrop и открывается оно при помощи другой функции. У них различные предназначения. А для саморазвития ищи в Google. Да и сам Js-код можно написать по-другому - в видео много лишнего. Не можешь писать, так скинь в телегу исходный код, как делают многие.

  • @КонстантинСмирнов-ъ4ж
    @КонстантинСмирнов-ъ4ж 2 месяца назад

    С критикой у тебя большие проблемы, раз способен только удалять комментарии, а не отвечать на них!!! Теперь понятно какой ты профи). Никакой)))

    • @vadymprokopchuk
      @vadymprokopchuk  2 месяца назад

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

    • @vadymprokopchuk
      @vadymprokopchuk  2 месяца назад

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

    • @КонстантинСмирнов-ъ4ж
      @КонстантинСмирнов-ъ4ж 2 месяца назад

      @@vadymprokopchuk Тогда извини за наезд про удаление. Там было написано, что у тебя не popup, модальное окно в видео рассматривается. И если не можешь печатать, то скидывай исходники в телегу, а люди сами разберутся - надо ли печатать с экрана или сразу исходник загрузить и просто следить за твоими объяснениями.

  • @evgeniyprowork
    @evgeniyprowork Месяц назад

    если диалогов больше чем 1, можно такой js код юзать:
    const dialogs = document.querySelectorAll('.dialog');
    const openModals = document.querySelectorAll('.open-modal');
    const closeModals = document.querySelectorAll('.close-modal');
    openModals.forEach((button, index) => {
    button.addEventListener('click', () => {
    dialogs[index].showModal(); // showModal() is inside method for Dialog
    document.body.classList.add('scroll-block');
    });
    });
    closeModals.forEach((button, index) => {
    button.addEventListener('click', () => {
    dialogs[index].close(); // close() is inside method for Dialog
    document.body.classList.remove('scroll-block');
    });
    });
    dialogs.forEach((dialog) => {
    dialog.addEventListener('click', (event) => {
    const isOverlayClick = event.target === dialog;
    if (isOverlayClick) {
    dialog.close(); // close() is inside method for Dialog
    document.body.classList.remove('scroll-block');
    }
    });
    // 'cancel' works with Dialog
    // in this case when we click on keyboard 'Esc' when Dialog modal is open and returns returnScroll()
    dialog.addEventListener('cancel', () => {
    document.body.classList.remove('scroll-block');
    });
    });