popup скрипт для сайта
Открытие окон и методы window
Всплывающее окно («попап» – от англ. Popup window) – один из древнейших способов показать пользователю ещё один документ.
… и откроется новое окно с указанным URL. Большинство современных браузеров по умолчанию будут открывать новую вкладку вместо отдельного окна.
Попапы существуют с доисторических времён. Они были придуманы для отображения нового контента поверх открытого главного окна. Но с тех пор появились другие способы сделать это: JavaScript может загрузить содержимое вызовом fetch и показать его в тут же созданном
Кроме того, попапы не очень хороши для мобильных устройств, которые не умеют показывать несколько окон одновременно.
Однако, для некоторых задач попапы ещё используются, например для OAuth-авторизации (вход через Google/Facebook/…), так как:
Блокировка попапов
В прошлом злонамеренные сайты заваливали посетителей всплывающими окнами. Такие страницы могли открывать сотни попапов с рекламой. Поэтому теперь большинство браузеров пытаются заблокировать всплывающие окна, чтобы защитить пользователя.
Всплывающее окно блокируется в том случае, если вызов window.open произошёл не в результате действия посетителя (например, события onclick ).
Таким образом браузеры могут защитить пользователя от появления нежелательных попапов, при этом не отключая попапы полностью.
Попап откроется в Chrome, но будет заблокирован в Firefox.
Но если мы уменьшим тайм-аут до одной секунды, то попап откроется и в Firefox:
Мы получили два разных результата из-за того, что Firefox «допускает» таймаут в 2000 мс или менее, но все, что свыше этого – не вызывает его доверия, т.к. предполагается, что в таком случае открытие окна происходит без ведома пользователя. Именно поэтому попап из первого примера будет заблокирован, а из второго – нет.
Полный синтаксис window.open
Синтаксис открытия нового окна: window.open(url, name, params) :
Параметры в строке params :
Помимо этого существует некоторое количество не кроссбраузерных значений, которые обычно не используются. Найти примеры таких свойств можно по ссылке.
Пример: минималистичное окно
Давайте откроем окно с минимальным набором настроек, просто чтобы посмотреть, какие из них браузер позволит отключить:
Давайте исправим значения и зададим нормальные координаты ( left и top ) и значения размеров окна ( width и height ):
Большинство браузеров выведет окно с заданными нами настройками.
Правила для опущенных параметров:
Доступ к попапу из основного окна
Вызов open возвращает ссылку на новое окно. Эта ссылка может быть использована для управления свойствами окна, например, изменения положения и др.
Например, здесь мы генерируем содержимое попапа из JavaScript:
А здесь содержимое окна модифицируется после загрузки:
Окна имеют свободный доступ к содержимому друг друга только если они с одного источника (у них совпадают домен, протокол и порт (protocol://domain:port).
Доступ к открывшему окну из попапа
Если вы запустите код ниже, то он заменит содержимое открывшего (текущего) окна на «Тест»:
let newWin = window.open(«about:blank», «hello», «width=200,height=200»); newWin.document.write( «
Комментарии
Делаем модальные окна для сайта. Заботимся об удобстве и доступности
Я занимаюсь вёрсткой и программированием сайтов. Почти в каждом макете, который я верстал, были модальные окна. Обычно это формы заказа звонка в лендингах, уведомления о завершении каких-то процессов, или сообщения об ошибках.
Вёрстка таких окон сначала кажется простой задачей. Модальные окна можно сделать даже без помощи JS только лишь с помощью CSS, но на практике они оказываются неудобными, и из-за маленьких недочетов модальные окна раздражают посетителей сайта.
В итоге было задумано сделать собственное простое решение.
Вообще говоря, есть несколько готовых скриптов, JavaScript библиотек, реализующих функционал модальных окон, например:
(в статье не рассматриваем решения на базе Frontend-фреймворков)
Несколькими из них я пользовался сам, но почти у всех находил какие-то недостатки. Некоторые из них требуют подключения библиотеки jQuery, которая есть не на всех проектах. Для разработки своего решения, нужно сначала определиться с требованиями.
Что мы ждём от модальных окон? Отвечая на этот вопрос, я основывался на докладе «Знакомьтесь, модальное окно» Анны Селезнёвой, а так-же на относительно старой статье NikoX «arcticModal — jQuery-плагин для модальных окон».
Итак, чтобы нам хотелось видеть?
Дисклеймер: Прежде чем мы рассмотрим подробности, сразу дам ссылку на готовый код получившейся библиотеки (HystModal) на GitHub, а также ссылку на демо+документацию.
1. Разметка HTML и CSS
1.1. Каркас модальных окон
Как открыть окно быстро? Самое простое решение: разместить всю разметку модального окна сразу в HTML странице. Затем скрывать/показывать это окно при помощи переключения классов CSS.
Набросаем такую разметку HTML (я назвал этот скрипт «hystmodal»):
Как создать всплывающее окно (попап)?
Приветствую, друзья, сегодня будем создавать с вами попап (модальное окно) для сайта на jQuery/CSS. В данном всплывающем окне вы можете разместить что угодно. Например, форму для обратной связи (как в данном примере) или любой другой контент. Вы сможете сверстать в самом окне что угодно. Пример того, как будет выглядеть наш попап, вы можете увидеть на codepen.io кликнув на кнопку ниже:
Базовая HTML-структура попап-окна
Для начала, создадим базовую HTML-структуру для нашего модального окна. Она будет состоять из двух частей. Первая — div с классом «popup-bg», который будет использоваться для затемнения остального сайта при открытии попап-окна. Вторая часть — div с классом «popup». Это и будет телом нашего окна, в котором мы будем располагать весь контент. Так же я добавил картинку крестика с классом «close-popup». Данный класс нам понадобиться в будущем для закрывания окна. Картинку я поместил внутрь «popup». Вместо картинки вы можете сделать крестик с помощью CSS.
Базовый CSS-код
Ниже я приведу базовый CSS-код для затемнения сайта, отображения окна и позиционирования крестика. То есть для базовой структуры любого окна, вне зависимости от контента. Для того, что бы не писать стену текста с объяснением каждой строки, я просто покажу свой код, и оставлю в нем комментарии.
Наконец jQuery-код для открытия и закрытия окна
Дня начала создадим кнопку, при клике на которую мы будет показывать попап.
Далее сам jQuery код. Все максимально просто. Кликаем на класс «open-popup» — окно появляется, кликаем на «close-popup», окно пропадает. Так же в функцию при клике мы передаем e, что бы отследить клик. После чего функция preventDefault() отрубает стандартное поведение при клике на ссылку. Это нужно для того, что бы экран не прыгал вверх при открытии всплывающего окна. Если заменить в кнопке тег «a» на «span» или другой, то эту строчку можно убрать.
Наш попап готов. Осталось только поместить внутрь контент, и уже стилизовать его. Но можно ли улучшить этот код? Конечно!
Убираем скролл при открытом попап окне.
Если вы делали все со мной, и уже проверили, то вы могли заметить, что при открытии окна мы можем скролить по сайту. Выглядит это не очень. Для того, что бы убрать скролл, для начала добавим эти строчки в CSS код.
После чего немного модифицируем jQuery код. Будем добавлять/убирать этот класс к тегу html, при открытии или закрытии модального окна соответственно.
Готовый код для попап окна с формой обратной связи
Или вы можете скачать готовый архив, со всеми файлами и картинками, кликнув сюда.
Спасибо что прочитали! Если у вас остались вопросы, возникли проблемы или вы заметили ошибку — пишите в комментариях под этой статьей, постараюсь помочь всем)
Так же предлагаю ознакомиться с другими моими уроками:
Создаем popup окно для сайта
Всплывающие окна – один из самых старых способов, позволяющих показать пользователю дополнительный контент. Давайте разберемся как создается popup окно для сайта?
Этот код JavaScript откроет новое окно с указанным URL. Большинство современных браузеров откроет новую вкладку вместо нового окна.
Как обойти блокировку
В недавнем прошлом всплывающими окнами слишком злоупотребляли многие сайты, нацеленные на показ рекламы. Они буквально заваливали пользователей тоннами объявлений. Чтобы избежать этого, современные браузеры блокируют всплывающие окна и защищают своих пользователей.
Они блокируют всплывающие окна, если они были вызваны вне пользовательских обработчиков событий:
А что если всплывающее окно будет открываться с помощью обработчика onclick, но после setTimeout?
Напишите следующий код:
Всплывающее окно открывается в браузере Google Chrome, но блокируется в браузере Firefox. Но если мы сократим время задержки, заработает и в Firefox:
Браузер Firefox разрешает задержку в 2000мс или меньше. Но если она длится дольше, браузер блокирует окно.
Как всплывающие окна используются сегодня
Существует много методов для загрузки и отображения данных на странице с помощью JavaScript. Но иногда всплывающие окна работают лучше всего.
Например, многие интернет-магазины используют онлайн-чаты для общения с клиентами. Посетитель нажимает на кнопку, запускается функция window.open и открывается всплывающее окно с чатом.
window.open
Рассмотрим синтаксис метода: window.open(url, name, params):
URL для загрузки в новое окно.
Название нового окна. Каждое окно имеет свой window.name. Нужно указать, какое окно использовать в качестве всплывающего.
params
Параметры конфигурации нового окна. Содержит перечисленные через запятую параметры. Например: width:200,height=100.
Параметры для params:
Пример простого popup-окна
Откроем окно с минимальным набором параметров, чтобы понять, какие из них браузер позволит отключить:
Большая часть параметров отключено и окно расположено за пределами экрана. Запустите этот код и посмотрите, что произойдет.
Большинство браузеров самостоятельно «исправляет» такие ошибки, как нулевое значение свойств width/height и размещение окна за пределами экрана в параметрах left/top. Например, браузер Google Chrome открывает такое окно с полной шириной и высотой, поэтому окно занимает весь экран.
Добавим корректные значения width, height, left, top:
Большинство браузеров отображают приведенный выше пример правильно.
Правила для не использованных в примерах параметров:
Доступ к popup-окну
Вызов open возвращает ссылку на новое окно. Его можно использовать для управления свойствами окна, изменения местоположения и т.д.
В примере, приведенном ниже, показано, как меняется содержимое нового окна после загрузки.
Для окон с URL, указывающими на другие сайты, можно поменять адрес источника, назначив newWindow.location=. Но нельзя получить доступ к содержимому. Это делается с целью обеспечения безопасности пользовательских данных.
Доступ к окну opener
JavaScript использует window.opener для доступа к окну, которое его открыло. Значение будет null для всех окон, кроме всплывающих окон.
У родительского окна и всплывающего есть ссылки друг на друга. Они могут свободно изменять друг друга, если они указывают на один источник.
Закрытие всплывающего окна
Чтобы закрыть popup-окно, нужно вызвать newWindow.close(). Метод close() можно вызвать для любого объекта window. Но window.close() игнорируется почти всеми браузерами, если окно было открыто не с помощью window.open().
Приведенный ниже код загружает, а потом закрывает окно:
Фокусировка popup- окна
В недавнем прошлом плохие страницы этим злоупотребляли. Например, посмотрите на приведенный ниже код:
Когда пользователь пытается переключиться на другое окно (blur), это возвращает его в предыдущее. Цель состоит в том, чтобы «заблокировать» пользователя в окне.
Существуют ограничения, которые запрещают подобный код. Они зависят от конкретного браузера.
Например, мобильный браузер обычно игнорирует этот вызов. Также фокусировка не работает, когда всплывающее окно открывается на отдельной вкладке, а не в новом окне.
Тем не менее, кое-что можно сделать. Например:
Заключение
Также, если мы открываем всплывающее окно, лучше сообщить об этом пользователю.
Пожалуйста, оставьте ваши мнения по текущей теме материала. За комментарии, подписки, лайки, дизлайки, отклики низкий вам поклон!
Всплывающее окно при загрузке сайта с помощью CSS3 и небольшого javascript
Всем нам блуждающим по просторам глобальной сети попадались на глаза сайты, при загрузке которых сразу, или с задержкой в несколько секунд появлялось всплывающее окно с различным содержанием, будь то просто объявление, реклама какого-либо продукта, подписная форма или же форма обратной связи.
Можно по разному относиться к таким методам подачи информации. Меня например, все эти всплывающие окна выскакивающие во время посещения какого-нибудь сайта, мягко сказать напрягают, да что там, они меня просто бесят, хочется сразу уйти, покинуть этот сайт, что в большинстве случаев я и делаю. Да и все современные браузеры с подозрением относятся к разного рода всплывающим окнам на первоначальном этапе загрузки сайта, они их просто-напросто блокируют. Но, как мы видим, многие, очень многие веб-мастера реализуют именно такой, навязчивый способ подачи информации.
Меня больше заинтересовала техническая сторона вопроса и методы его решения. Придумывать особо ничего не пришлось, все давно придумано и прекрасно работает. Сегодня вместе с вами, мы разберем детально, как проще всего реализовать модальное окно всплывающее при загрузке сайта, используя в работе магию новых свойств CSS3 и совсем небольшого javascript, чтобы усыпить бдительность браузеров и иметь контроль над временем появления информационного блока.
Для начала, не отходя от кассы, на специально приготовленной демо-странице, вы можете посмотреть на конечный результат всего того что мы будем с вами делать. В примере, в всплывающем окне я использовал текст и парочку изображений, для наглядности. Вы же в последствии сможете вставить в модальное окно все что угодно, главное не переусердствуйте )))).
Разметка HTML
Разметка нашего всплывающего окошка чрезвычайно проста. Нам понадобятся всего лишь два блочных элемента div с идентификаторами id, для привязки к javascript и формирования внешнего вида с помощью стилей CSS. Элемент
Модальное Окно!
Ширина модального окна задана в процентах, в зависимости от ширины родительского контейнера, в данном примере это фон затемнения.
Размер блока миниатюр так же определил в процентной записи (25%), тем самым обеспечив возможность пропорционального изменения, при просмотре на экранах различных пользовательских устройств.
Простейшая анимация появления с помощью изменения свойства прозрачности (opacity) от 0 к 1
Для того чтобы окно появлялось не сразу при загрузке сайта, а с задержкой в несколько секунд, мы используем небольшой javascript и уже с помощью его сможем регулировать время появления всплывающего окна. Все браузеры спокойно отнесутся к такому раскладу и не будут блокировать работу скрипта, а значит и само появление всплывающего окошка. Вставить этот javascript лучше всего в конце тела страницы html перед закрывающим тегом