Есть варианты по улучшению? Пиши в комментариях! Переписать код можно с экрана, ну а для ленивых готовый результат урока ищи на патреоне по ссылке ниже 👇 🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle 🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat) 🔴 Facebook: facebook.com/freelancerlifestyle 🔴 Instagram: instagram.com/freelancer.lifestyle
Для фиксированных элементов лучше использовать margin(в таком случае элемент будет виден весь, в случае с padding 17px элемента будут обрезаны) Timeout для закрытия окна лучше получить с помощью window.getComputedStyle(в этом случае его не нужно хардкодить каждый раз при смене длительности в стилях) или можно использовать transitionend ивент, чтобы быть в курсе, что анимация закончилась и можно что-то сделать Вообщем для улучшений большое поле деятельности. Очень хорошо, что обращайте внимание на такие мелочи как скачки контента, не многие на это обращают внимание, к сожалению.
Спасибо за видео, очень полезно! Сам как-то делал свою реализацию модальных окон. Хотел рассказать с какими проблемами я столкнулся (ведь нет предела совершенству :) 1. Нажмите курсором в окне и проведите не отпуская до фона окна и отпустите :). Окно закроется, так как для клика считается общий предок. Получается, например если в окне есть форма - выделяешь текст и случайно уходишь за пределы модалки - окно закрывается :) 2. Фокус не замыкается в окне. Если при открытой модалке нажимать Tab, то фокус будет переходить под неё, страница будет скролится. 3. В IE11 Нижний margin у модалки не работал, оно прилипало к низу. Но в принципе, пользователи IE это заслужили :) 4. Если body задать overflow:hidden, в сафари IOS 11, если в модалке есть инпут - будет баг, что курсор уедет с input'a, но в IOS 12 это уже починили, рекомендуют ставить для body тоже position:fixed, но тогда возникает проблема с сохранением прокрутки, думаю сейчас можно уже забить :) 5. Если окну не давать display:none, то если в модалке проигрывается видео - то оно не выключается при закрытии окна, нужен доп. js код. Вроде бы всё рассказал :), но в любом случае у вас отличное решение, особенно понравилось, что даётся сдвиг для всех fixed элементов, чтобы они не прыгали :)
@@FreelancerLifeStyle я могу дополнить идеи... 1. Что бы не было "мигания" затемнения при переключении МЕЖДУ окнами, можно затемняющий фон повесить на появляющийся body.lock::after , а для красоты можно еще добавить размытие для body.lock .wrapper 2. Пока основной баг - это body overflow:hidden - контент, естественно, скачет наверх. я решил переназначением $(window).scrollTop( lastTop ); , но тогда появляется проблема с фиксированных хедером, т.к. он лепится к верху body... не очень красиво. Тогда надо ещё и для хедера изменить позицию top, но это шаг в сторону гемороя, а не оптимизации... Пока решения не нашел. 3. Ещё я бы добавил всё таки какую то проверку, типа if(popupLink.tagName == 'BUTTON') и тогда брать не href а value, ведь часто попап вешают на button, а ссылка - это всё таки переход.
"1. Нажмите курсором в окне и проведите не отпуская до фона окна и отпустите" - лечится заменой 'click' на 'mousedown' , но я люблю делать нажатие на mouseup, так что клик в "молоко" делаю отдельно.
Век живи век учись... Вроде я не первый год занимаюсь разработкой сайтов, но смотря твои уроки каждый раз нахожу для себя что-то новое. Довольно долго использовал Bootstrap, только лишь из-за его быстрых решений с теми же pop-up, готовой сеткой и прочими наработками и сквозь зубы мирился с кучей лишнего, что с ним подключалось. И только благодаря твоим понятным урокам и наработкам, я отказался от него и начал создавать свои заготовки. Спасибо за твой вклад!
Как всегда, все чётко и красиво подано.. Я вообще чел ленивый на комменты, но после просмотра, не могу не отметиться. ПОПАПЫ, ВСЕМ ПОПАПАМ - ПОПАПЫ !!!
Отличные уроки! Сначала думал очередной треш обрывками, а тут детально с нуля, доступно и не нудно. Хочется смотреть и смотреть, а то в других видео засыпаю через 5 минут после монотонности. Подписался на канал. Очень рад! Спасибо!
Чтобы скрыть попап, не нужно дополнительно писать id=header для display-fixed элемента. Достаточно в ссылке написать href="##" этот якорь не приведёт к скроллу к началу страницы
Спасибо большое за простое и понятное видео! Целый день пыталась сделать модальное окно без JS, когда доделала - нашла этот материал. Оказывается можно было не мучиться!
vertical-align: top. Я счастлив, что ты появился в моей жизни )))))))))) Не знал как убрать эту белую полоску, даже воображения не хватало, как это гуглить )))
Очень понятно и толково! Спасибо тебе за работу, продолжай в том же духе! Ещё меся назад казалось всё это страшным сном, а сейчас уже сам делаю лендинги и даже с попАпами)) Всё твоя заслуга, спасибо, бро!
Сейчас прохожу платный курс по фронтенд-разработке. Был приятно удивлен, когда это видео порекомендовал один из наставников, и сказал что в свое время оно ему очень помогло. Жека, тебе огромная благодарность за твой труд, просто лучший!!! Как говорится тренер тренеров, the best of the best! 💪🔥
Классно разобрано про полосу прокрутки. Может кому-то будет полезно: Быстрый и аккуратный крестик можно получить из символа +, повернув его на 45 градусов через транзишн ротэйт. Нод-лист удобнее перебирать циклом forEach, чем for. Не поленитесь разобраться с ним. Вместо прослушивателя событий на каждую ссылку лучше сделать один прослушиватель на секцию или даже документ, а внутри него делегировать условиями на что именно и как срабатывать. Что-то подобное как тут в функции закрытия модалки при клике мимо окна. Прямо в том же прослушивателе можно для всех остальных кликов на странице прописать остальные условия. Смотрите тему делегирование. Получить боди можно без квериселектора, просто document.body.
Когда то, в 2008 году, я ехал на поезде с будущей женой в венгерский Дебрецен, и наш состав менял колеса на европейскую колею ... это был ЧОП !!! а сейчас, в 2020 я смотрю лучший контент по верстке для вайтишников...)) Женя спасибо огромное за твои уроки!!
Спасибо огромное, но чтобы на js работало, пришлось несколько раз с нуля попереписывать, побеситься что не работает, но в итоге всё работает и я так рад :)
Попапы это круто! Кстати, часто встречаются в макетах звёздные рейтинги, можно было бы о них видос запилить. Это так, если тебе понравится идея. Видос как всегда очень информативный и полезный!
Большое спасибо за видео, как всегда очень вовремя, как раз нужно для работы) Еще хотелось бы видео про структуру файлов для многостраничного сайта, хотя бы кратко. Знаю что уже не раз просили тебя о таком, попрошу и я еще раз))
Спасибо! Смотрю твои уроки. Следующее большое дело буду оформлять в html. Ты делаешь крутую работу. Знай, что у тебя есть бесплатная юридическая консультация по любым вопросам.
Смотреть всем перфекционистам обязательно! Я тоже тащусь от устранении эффекта дергания) Как джин появился Жека и принёс с собой замечательный видос об модальных окнах) Женя очень класно и подробно обясняеш по порядку об функциях и переменных. Так держать) Самый лучший контент)
Я ніколи не любив JS за незручний синтаксис та незрозумілу структуру, але ваше роз'яснення дало мені надію на те, щоб навчитись ним користуватись. Дякую за вашу діяльність!
Жека, как всегда реализация на высоте. Особо порадовала внимательность к мелочам и использование VanillaJS, но есть пару вопросов: 1. Почему при проходе по массиву используешь индексы? Есть же for .. of или forEach. С ними не нужно делать проверку на длину массива 2. Очень удивился использованию числового кода при прослушке события нажатия клавиши. Есть же более читабельный вариант event.code === 'Escape' И возможно баг небольшой в твоём коде. При вызове popupOpen ты каждый раз вешаешь новый обработчик на 'click', а эту функцию ты будет вызывать не один раз. В итоге после продолжительного времяпрепровождения на сайте будет висеть целая куча одинаковых обработчиков, которые будут жрать процессор и память. Возможно я ошибаюсь и в стандарте js как то предусмотрен этот момент. А так видос топ. Продолжай в том же духе. P.S. стало гораздо приятней смотреть на VS code вместо sublime
Действительно, при многократном открытии/закрытии попапа на нём будут накапливаться обработчики. Думаю, самый простой способ решить эту проблему - вынести добавление обработчика попапу из функции popupOpen. Логично добавлять его там же, где добавляется обработчик на ссылку, открывающую попап.
Спасибо за видео. Вот только что с Вашей помощью сделал выдвигающуюся корзину с правой стороны) Выглядит очень классно) Но, на счёт адресной строки, Вы правы, возможно придётся потом и js код перепечатать
Я новичок в js, посмотрел как прикрутить клавишу Esc к попапу, у меня код немного другой но функционал такой же. Вот по поводу клавиши долго мучился с кодами ничего не получалось, потом посмотрел здесь learn.javascript.ru/keyboard-events и получается, что свойство which с кодом клавиши устаревшее, у меня получилось такое условие event.code === 'Escape' и все заработало, кстати для тех кто в коде использует горячие клавиши свойство code будет работать с теми же клавишами даже при смене раскладки. А в остальном хорошее видео, снимай дальше уроки, только желательно без устаревших спецификаций.
@@FreelancerLifeStyle но тогда бы пришлось JQ грузить еще на сайт! Думаю если задача не сильно сложная, то можно и без JQ обходиться) В любом случае, спасибо за урок!
Добрый день! Очень полезный урок! Огромное спасибо за видео, но позвольте небольшое предложение: было бы еще более информативней, если бы Вы написали код с самого начала (HTML, CSS, JS)
