Модальное окно (попап) для сайта. Как сделать всплывающее окно?

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

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

  • @WebDevTips
    @WebDevTips  4 года назад +5

    Если у вас остались любые вопросы - задавайте их в комментариях, с радостью отвечу)
    Стоит ли сделать такой же урок, но без использования jQuery? Пишите в комментариях 👇

  • @Vse-po-Faktu
    @Vse-po-Faktu Год назад

    Спасибо большое за простое, короткое, понятное и содержательное объяснение!

  • @ОсадчийДенис-ы8ж
    @ОсадчийДенис-ы8ж 4 года назад +4

    Спасибо)
    Давно искал, как попап сделать.

  • @nazariisemeniuk2905
    @nazariisemeniuk2905 4 года назад +4

    Спасибо, как всегда все доступно и понятно)

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

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

    • @WebDevTips
      @WebDevTips  4 года назад +2

      Спасибо большое за комментарий, очень приятно)
      Сейчас помимо обычных видео, готовлю 2 больших и подробных. Первый с полным разбором flexbox (планирую выпустить в 2х частях, в первой разберу теорию подробно + при описании каждого свойства буду показывать где я это использовал в реальных проектах, и где могут возникнуть проблемы. А во второй сверстаю с 0 простенький сайт чисто на флексах, с объяснением). А второй рлик о том, с чем у меня долго были проблемы когда я начинал - полный разбор position.Так же с примерами с готовых проектов, над которыми я работал)

    • @denismaltcev3356
      @denismaltcev3356 4 года назад +1

      Web Dev Tips буду рад новым знаниям, и с удовольствием проходить практику, мастер Йода возьмите в ученики Джедая)

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

    67 подписчиков?? я думал 67 к. спасибо за полезное видео! лайк)

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

    Спасибо большое, прям спас!

  • @НиколайПопов-д8ю
    @НиколайПопов-д8ю 3 года назад +1

    Спасибо огромное за видео

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

      Спасибо за комментарий)

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

    отлично брооо))))
    спасибооо
    продолжай в том же духе

  • @Риф-и5ь
    @Риф-и5ь 3 года назад +1

    Ооооо большое спасибо!!

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

      Спасибо за комментарий)

  • @Ivan_Balakirev
    @Ivan_Balakirev 2 года назад +2

    что то не работает пример на сайте

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

    Спасибо было полезно. А не подскажите, как реализовать функцию оповещение пользователя, когда он нажал на кнопку Отправить, появлялось "ВАША ЗАЯВКА ПРИНЯТА"

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

    Привет! У меня проблема
    При нажатии на кнопку, у меня не открывается попап, а просто страница перелистывается вверх и ничего не появляется.
    Что делать?

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

    Добрый вечер
    Можно вопрос?

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

    Cпасибо за урок. Подскажите по поводу свойства place-items Он может объединить в себе align-items и justify-content ? чтоб отцентровать блок?

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

    есть важный момент который не написан не на сайте не в видео, это действие подключения библиотеки jquery.min.js. И краине не понятно раскрыта тема того какой клас конкретно нужет только для закрытия окна. Спасибо автору, в реальном проекте убил кучу времени чтобы применить этот метод. Стили оказывается тоже можно не писать если само окно которое прячем уже есть

  • @АптикеевКонстантин

    У меня такой вопрос, кнопка не хочет работать, окно не вылезает при нажатии

  • @АлексейСемёнов-ъ6и

    удалил action форма заработала, как им пользоваться ?

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

    Здравствуйте, как привязать кнопку к данному попапу?
    Спасибо за раннее)

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

    Жаль что окошко закрывается только при нажатии на крестик. Было бы неплохо если бы была возможность закрытия модального окна при клике на область за окном

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

      Спасибо за комментарий)
      Там в комметариях ниже я оставил ссылку на codepen, где реализовано закрытие при клике вне окна.

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

      codepen.io/webdevtips-ru/pen/OJNwgjV
      Или вот, можете скопировать просто отсюда, но на CodePen, думаю, более наглядно:
      $('.popup-bg').click(function (e) {
      if (!$(e.target).closest(".popup").length) {
      $('.popup-bg').fadeOut(600);
      }
      });

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

      @@WebDevTips Спасибо за наводку)
      Просто попытался сегодня реализовать это сам, все в общем то вышло, но как по мне ненадежно) Спасибо

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

      @@WebDevTips в таком варианте, при закрытии на пустое место, скролл не возвращается)

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

    Снимите видео как создать систему комментариев на сайте

  • @ДагунСултаев
    @ДагунСултаев 3 года назад

    Добрый день. Все повторил , остался вопрос, почему при уменьшении экрана не уменьшается сам popup и как сделать вертикальную прокрутку?

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

      Здравствуйте, можете залить код на codepen и дать ссылку сюда - t.me/webdevtips_ru ?
      (Ютуб ссылку удалить просто)

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

    Вот смотри, кнопка отправить заявку есть, а как сделать так чтобя заявка отправилась мне на почту например?
    Желательно без js

  • @HD-qp3fw
    @HD-qp3fw 4 года назад +1

    Привет, да, сделай пожалуйста на чистом JS

    • @Law-m9h
      @Law-m9h 3 года назад

      А чем чистый js лучше?

  • @АлексейСемёнов-ъ6и

    после того как текст заменили формой перестало работать

  • @baummm_9315
    @baummm_9315 4 года назад

    Видео с попапами много, а с попапами и маршрутизацией нету(

  • @ВикторияНеброй
    @ВикторияНеброй Год назад

    Я одна слышу тут extremCode 😮