window on js

Модальное окно, которое вы ждали. Или как вызвать «всплывашку» с разных кнопок на чистом JS

Добрый день! Меня зовут Черепанов Борис, я занимаюсь разработкой сайтов на wordpress и bitrix. Я тут над проектом работал. Одно из ограничений было не использовать jquery, а мне нужно было вызвать одно и тоже модальное окно с разных кнопок. Собственно, это довольно простая задача, но я решил пойти дальше и сделать модальное окно, которое бы создавалось при первом клике, сохраняло своё состояние, имело конструктор для вызова и т.д. И в итоге я не пожалел. Объясню почему позже. Я «обернул» это модальное окно в готовое решение, которое можно использовать постоянно.

Установка

Установить такую «модалку» просто. Скачиваете js-файл и подключаете. Он не зависит от каких-то событий или библиотек, так что можете подключать где вам нужно. Вот ссылка на github

Инициализация

На той странице на которой вам нужно вызвать вы пишите в js:

new XMC(< bodyID: 'body', backgroundLayerID: 'wrapper', selector: 'data-type', selectorValue: 'openModalForm', btnId: 'mfClose', content: 'Привет', classListBg: ['zuzu', 'zaza'], classListBody: ['zuzu', 'zaza2'], classListBtn: ['zuzu', 'zaza3'], styleBg: < top: '0', left:'0', right: '0', bottom: '0', position: 'fixed', background: '#00000090', justifyContent: 'center', alignItems: 'center', zIndex: '6' >, styleBody: < minWidth: '200px', minHeight: '200px', background: '#ffffff', justifyContent: 'center', alignItems: 'center', >, btnStyle: < width: '40px', height: "40px", background: '#ffffff', display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'absolute', top: '5%', right: '5%', cursor: 'pointer' >>); 

Подробнее о пунктах в объекте

Есть 6 обязательных пунктов:

• bodyID – это идентификатор блока в котором будет содержаться контент модального окна
• backgroundLayerID – id затемняющего слоя
• selector – html атрибут который будет у всех кнопок которые будут вызывать модальное окно
• selectorValue – значение селектора
• bntID – id кнопки закрытия модального окна
• content – текст или html внутри модального окна

• classListBg, classListBody, classListBtn – массивы классов для затемняющего слоя, основного окна и кнопки закрыть соответственно
• styleBg, styleBody, btnStyle – объекты со стилями затемняющего слоя, основного окна и кнопки закрыть соответственно

Немного о самом модальном окне

Я уже говорил, что основная задача, которую решает это модальное окно — это вызов с нескольких кнопок. Клик по нескольким кнопка для вызова js это типичный пример делегирования и в XMC (так я назвал своё модальное окно) оно реализовано так:

XMC.prototype.delegateClick = function () < var mf = this; window.addEventListener('click', function () < // Проверяю есть ли у элемента, на который я нажимаю соответствующий атрибут и его значение if(event.target.hasAttribute(mf.selector) && event.target.getAttribute(mf.selector) === mf.selectorValue )< mf.show(); // Показываю модальное окно mf.delegateClose(); // Вешаю обработчик на закрытие >>, mf, false); >; 

Соответственно и в конструкторе нужно прописать:

Кстати, в своё время, мне помогла с этим разобраться статья с learn javascript. Ознакомиться с ней будет полезным.

AJAX для формы

В моём «кейсе» необходимо было загружать форму по ajax (эта задача появилась в процессе). Благодаря моему изначальному подходу мне удалось сэкономить не мало времени. Я расширил через прототип.

Источник

Создаем собственное всплывающее окно на javascript, css и jQuery. Какой способ выбрать?

Доброго времени суток всем читателям данной статьи. Если для своего веб-сервиса вам необходимо сделать всплывающее окно, то вы нашли правильную публикацию! Сегодня я расскажу вам как создается всплывающее окно JavaScript, css и jQuery инструментами.

В статье подробно будут рассмотрены 3 варианта написания всплывающих окон с затемненным фоном и в конце проведен анализ каждого способа. Любой понравившийся код из представленных примеров вы сможете впоследствии использовать в своих программах. А теперь за дело!

Нет, ну скажите, зачем оно вообще нужно!?

На самом деле такой механизм, как всплывающие окна используются во многих интернет-ресурсах. В качестве примера можно привести тот же «ВКонтакте» или другие соцсети, где при просмотре фотографий или других графических файлов пользователю открывается слайдер, выполненный как появляющееся окно.

Другим распространенным вариантом использования такого подхода являются окна с сообщениями для входящих на сайт или закрывающих его людей. Такие сообщения появляются один раз или при загрузке страницы, или после нажатия на крестик, который закрывает вкладку.

Также я уверен, что каждый из вас наблюдал картину, когда при нажатии на определенные кнопки на сервисе перед вами выскакивает окно с просьбой о регистрации. После его заполнения данные отправляются на сервер при помощи, например, php и после вам открываются все возможности сервиса.

Не могу промолчать и о третьем способе использования всплывающих окон. Это спам и реклама.

Начнем с простого

Теперь мы подошли к самим примерам. Начну я с программной реализации, выполненной при помощи css и html. Я написал приложение, в котором окно всплывает при нажатии на определенную кнопку. В ней я расположил изображение. Однако вы можете впихнуть туда любую информацию, будь то ссылки, текст, фотографии, видео, формы регистрации и так далее.

Итак, сама разметка веб-страницы вмещается в несколько строк, потому что весь сок состоит в правильной стилизации.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Как видите, все очень просто. А теперь перейду к каскадным таблицам. Вот там-то кода будет много, но он опять-таки легкий.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81

 /*Затемнение дисплея*/ .overlay < background-color: rgba(1, 0, 0, 0.77); right: 0; left: 0; position: fixed; top: 0; bottom: 0; z-index: 11; display: none; >/*Слой становится видимым*/ .overlay:target < display: block; >/*Растягиваю картинку на всю ширину попапа*/ .window img < width: 100%; >/*Характеристики самого окна, которое появляется после клика на кнопке*/ .window < left: 50%; z-index: 12; margin: 0; position: fixed; padding: 15px; border: 1px solid #383738; background: #fefeff; border-radius: 15px; box-shadow: 0 13px 21px rgba(0,1,0,.19),0 21px 63px rgba(0,1,0,.31); transform: translate(-50%, -450%); transition: transform 0.6s ease-out; >/*Появление модального окошка с верхнего края экрана*/ .overlay:target+.window < transform: translate(-50%, 0); top: 17%; >/*Внешний вид кнопки «Закрыть»*/ .close < top: -11px; right: -11px; width: 23px; height: 23px; position: absolute; padding: 0; border: 2px solid #ccd; border-radius: 15px; background-color: rgba(61, 61, 61, 0.81); box-shadow: 0 0 12px #010; text-align: center; text-decoration: none; font: 18px sans-serif; font-weight: bold; transition: all ease .9s; >.close:before < color: rgba(254, 254, 254, 0.89); content: "X"; text-shadow: 0 1px 3px #010; font-size: 14px; >/*Изменение характеристик при наведении на область */ .close:hover < background-color: rgba(253, 21, 0, 0.83); transform: rotate(360deg); >/*Оформление главной кнопки*/ #button

Возможности JavaScript

В скриптовом языке встроено множество возможностей создавать всплывающие окна. Так, попапы можно вызвать при помощи стандартных функций alert, confirm и prompt.

Alert выводит простое сообщение пользователю. В прошлых публикациях я много раз использовал этот метод. Закрыть такое окно можно нажав крестик или «OK». Синтаксис выглядит следующим образом:

Confirm необходим для задания вопроса пользователям. Такое окошко часто можно встретить при выходе с сайта или проверке какой-либо информации о вас. К примеру:

Если в появившееся окно стандартного вида можно ввести какую-то информацию, то это prompt.

Помимо этого, в js у window существует метод, который позволяет загружать новые страницы и открывать новые окна. Это

Данный метод обладает множеством встроенных параметров. Если есть желание их разобрать, то откройте официальную документацию. А я перейду сразу к простому примеру.

1 2 3 4 5 6 7 8 9 10 11 12 13

Благодаря такому коду всплывающее окно будет появляться сразу после загрузки страницы. Заметьте, что параметры нужно перечислять через запятую и обязательно без пробелов.

Работа с jQuery

Ну вот мы и добрались до библиотеки js – jQuery. Для реализации описываемого подхода я написал две функции на jq, которые отвечают за появление окна и за его закрытие.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

     #popUp < top: 12%; left: 50%; height: 200px; position: fixed; width: 300px; border-radius: 11px; background: #fef; margin-left: -150px; margin-top: -100px; display: none; opacity: 0; padding: 17px; z-index: 6; >#popUp #close < cursor: pointer; position: absolute; width: 23px; height: 23px; top: 17px; right: 17px; display: block; >#overlay  Какое-то предложение!