Как открыть модальное окно javascript

Как сделать модальное окно с помощью javascript

Модальное диалоговое окно должно показываться поверх документа с которым будет запрещено что-либо делать до тех пор, пока диалог не будет завершён и закрыт. Начнём.

HTML разметка

Контейнер

Начнем с элемента контейнера. Это будет div , растянутый по ширине и высоте документа в браузере поверх всего приложения, чтобы запретить пользователю делать что-либо с контентом в приложении: выделять текст, кликать по кнопкам, ссылкам и т.д.

Добавим position: fixed , чтобы контейнер всегда был в поле зрения.

Для центрирования содержимого модального окна по горизонтали и вертикали будем использовать display: flex; justify-content: center; align-items: center; .

Контент

Теперь элемент для содержимого диалогового окна. Это собственно и есть модальное окно, которое будет располагаться в центре экрана.

Обратите внимание, что вместо width и height используются max-width и max-height . Это для того, чтобы модальное окно работало и на небольших экранах. Если вместо этого использовать width: 500px; , то на мобильных устройствах будет горизонтальная полоса прокрутки.

Кнопка «закрыть»

Последний шаг для завершения модального окна — это стилизация кнопки для его закрытия. Поместим кнопку в правый верхний угол.

Добавление модальной функциональности с помощью Javascript

Модальное окно уже начинает хорошо выглядеть. Следующий шаг — добавление некоторой функциональности, вот наши требования:

  • Должна быть возможность открывать и закрывать окно.
  • Когда модальное окно открыто, нужно отключить прокрутку в родительском приложении.

Выберем интерактивные элементы

Чтобы переключать режим модального окна, начнём с определения интерактивных элементов.

Модальное окно не должно отображаться при инициализации приложения. Позаботимся об этом, добавив следующие css-свойства модальному контейнеру.

А также, добавим новый класс, который будет показывать модальное окно.

Добавим перехватчики событий

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

Теперь можно переключать видимость модального окна.

Отключение скролла в родительском приложении

И последнее, но не менее важное: посмотрим, как отключить прокрутку в родительском приложении, когда модальное окно открыто.

Простейший способ отключить скролл — сохранить позицию прокрутки родительского приложения перед открыванием модального окна. Затем надо добавить в документ перехватчик событий скролла и устанавливать положение прокрутки в сохраненное положение каждый раз, когда пользователь пытается скроллить родительское приложение:

Источник

Модальное окно на JavaScript

Уважаемые пользователи! Мы благодарим Вас за то, что Вам интересен нашен контент, поэтому с каждым днем хотим становиться все лучше и лучше!

Большое спасибо за вашу помощь и внимательность к нам!

Модальное окно — это контейнер, который при нажатии ссылки всплывает и предоставляет какую-либо информацию. Думаю многие уже знакомы с ним, ну если же нет посмотрите демо версию, чтобы понять что это такое. Сейчас их насчитывается огромное множество и каждый работает по своему. Например, есть совершенно стандартные модальные окна на JavaScript, которые запрашивают выполнить какое то действие, в данном примере подтверждения. Или например, другой вариант, всплывающее модальное окно при первом заходе на сайт, которое актуально будет подходить под различные подписки на группы в социальных сетях. Есть модальные окна на чистом CSS, ну мне хотелось бы отвести эту долю JavaScript, так как на нем это более интереснее получается и не плохо работает во всех браузерах.

Чтобы запустить модальное окно, нужно передать функции значение window.onload. В котором мы будем передавать два элемента идентификатора «a» и «b«.

Затем мы прописываем функцию «showA«, которая будет показывать модальное окно и передавать элементам «a» и «b» стили, а именно мы задали прозрачность, ширину и блокировку окна, если не была нажата ссылка «открыть«.

Читайте также:  Как регулируют евро окно

После открытия модального окна, нам нужно как то его потом закрыть или скрыть, для этого прописываем функцию «hideA«, которая будет скрывать модальное окно и прописываем ей стили для элементов «a» и «b«.

Прописываем ссылку, которая будет «открывать» модальное окно и придаем ей класс «pages», он будет влиять только на внешнее оформление ссылки.

В теге «div» указываем идентификатор «a«, который будет взаимодействовать со стилями CSS и с кодом JavaScript. Далее прописываем еще один тег «div» и придаем ему идентификатор «windows«, который будет выполнять роль разметки внутри контейнера модального окна.

Внутри указываем ссылку, которая будет «закрывать» модальное окно, также придаем ей стиль «pages» и по умолчанию задаем ей стиль «float: right«, то есть будем отображать ссылку закрытия модального окна в верхнем правом углу.

Прописываем идентификатор «b«, который будет скрывать окно.

Обязательные стили CSS, без которых модальное окно будет не правильно работать, а точнее вообще некорректно работать и отображать информацию.

И так первый обязательный стиль, касающийся позиции, в данном примере это fixed. Он позволяет отображать модальное окно, при этом ограничивая его с границей заливки. С помощью z-index мы указываем насколько модальное окно идентифицируется после нажатии ссылки «открыть«, а также «закрыть«. Также display: none, который позволяет скрывать модальное окно до нажатия ссылки.

Источник

Модальное окно на CSS + JS

Каждый начинающий веб-разработчик рано или поздно сталкивается с задачей, реализовать на сайте модальное окно (аналог pop-up окна).

Модальное окно полностью блокирует работу родительского сайта, пока пользователь не закроет данное окно. Как вы понимаете, что для навязывания такого действия, содержимое модального окна, должно представлять пользу для пользователя.

Желательно отказаться от автоматически всплывающего модального окна, а предоставить пользователю только кнопку, открывающую окно и хорошо видимый элемент (обычно это крестик), закрывающий окно. Этот способ, мы сегодня и реализуем в данной статье.

Демонстрация модального окна.

Мы сделаем адаптивное модальное окно без плагинов и библиотек, на чистом CSS+JS.

HTML разметка

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

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

Содержимое модального окна, состоящее из хедера, тела и футера.

Шапка модального окна

Напишите здесь что-нибудь важное

Добавьте что-нибудь менее важное.

Футер

CSS код

Оформление полноэкранного фона модального окна.

.modal <
display: none; /* Скрыто по умолчанию */
background-color: rgb(0,0,0); /* Затемнение фона */
background-color: rgba(0,0,0,0.5); /* Полупрозрачное затемнение */
z-index: 1; /* Фон на нижнем слое */
overflow: auto; /* При необходимости, то появиться прокрутка */
>

Модальное окно с содержанием, к которому примениться анимация.

.modal-content <
animation-name: animate;
animation-duration: 0.5s
>

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

Стилизуем крестик (сущность ×), при клике по которому, модальное окно закроется.

.close <
font-size: 30px;
font-weight: bold;
>

JS код

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

Получить модальное окно по ID.

var modal = document.getElementById(‘myModal’);

Получить кнопку, которая открывает модальное окно по ID.

var btn = document.getElementById(«myBtn»);

Получить тег span с классом close, который закрывает модальное окно.

var span = document.getElementsByClassName(«close»)[0];

Функции открыть / закрыть при клике.

Когда пользователь кликает по кнопке, модальное окно открывается – переходит из скрытного состояния в видимое.

btn.onclick = function() <
modal.style.display = «block»;
>

Когда пользователь кликает на крестик в теге span, модальное окно закрывается, наоборот переходит из видимого состояния в скрытное.

span.onclick = function() <
modal.style.display = «none»;
>

Когда пользователь кликает где-то за пределами модального окна, оно закрывается, становиться невидимым.

window.onclick = function(event) <
if (event.target == modal) <
modal.style.display = «none»;
>
>

Свободное владение языком JavaScript, делает создание web-страниц – не скучным процессом, вы можете сами в этом убедиться, посмотрев мой видеокурс «JavaScript, jQuery и Ajax с Нуля до Гуру».

Читайте также:  Чем обогреть панорамные окна

На CodePen вы можете увидеть весь код модального окна на CSS+JS, который можно скачать и использовать в своих проекта.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Источник

    Модальное окно для сайта на чистом CSS и JavaScript

    В этой статье познакомимся со скриптом, предназначенным для динамического создания модальных окон на сайте. Разберём из чего он состоит, как его подключить и использовать.

    Что такое модальное окно?

    Модальное окно – это элемент интерфейса, которой визуально представляет собой «всплывающее окно», отображающееся над остальной частью страницы .

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

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

    Изображение модального окна:

    Оно состоит из заголовка (хедера), основной части и футера.

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

    Загрузка и установка модального окна

    Проект модального окна расположен на GitHub. Перейти к нему можно по этой ссылке.

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

    Как создать и вызвать модальное окно?

    Эта реализация модального окна не требует непосредственного размещения его HTML кода на странице . Это выполняется программно.

    Таким образом, для того чтобы создать его достаточно просто вызвать функцию $modal :

    При создании окна вы можете сразу же его настроить, для этого в данную функцию необходимо передать данные в формате объекта. Осуществляется это с помощью соответствующих ключей (свойств). Например, с помощью ключа title вы можете задать заголовок, который будет иметь всплывающее окно по умолчанию. Ключ content позволяет установить содержимое, а footerButtons – кнопки для отображения их в его нижней части (футере).

    Все эти ключи являются не обязательными . Если не указать title , то заголовок будет иметь название «Новое окно» . Если не установить значению ключу content , то модальное окно в этом случае создатся с пустым содержимым.

    Ключ footerButtons в отличие от title и content принимает в качестве значения массив объектов . Каждый объект в этом массиве представляет собой кнопку . Она задаётся с помощью ключей text , class , handler . С помощью них вы можете установить кнопке (элементу ) текст, значение атрибутов class и data-handler . Если ключ footerButtons вообще не указать, то в этом случае модальное окно будет создано без футера.

    Пример кода, выполняющего создание модального окна без кнопок в нижней части, с заголовком «Новое сообщение» и пустым содержимым:

    Пример создания модального окна с настройками по умолчанию:

    Этот код создаст модальное окно без футера, с пустым содержимым и заголовком «Новое окно».

    Но функция $modal не только создаёт модальное окно в DOM, но также предоставляет методы для управления им.

    Читайте также:  Обналичка для окон пвх своими руками

    Для этого нужно создать переменную и присвоить ей результат выполнения функции $modal .

    В эту созданную переменную будет помещён объект (а точнее ссылка на него), имеющий следующие методы:

    • show – для отображения модального окна;
    • hide – для скрытия модального окна;
    • destroy – для удаления модального окна из DOM и связанных с ним обработчиков событий;
    • setContent – для установки контента;
    • setTitle – для установки заголовка.

    Эти методы предназначены для взаимодействия с созданным окном. Они позволяют его открыть, закрыть, изменить ему контент и др.

    Рассмотрим, как работать с этими методами на примерах.

    Например, метод show используется когда вам необходимо показать (открыть) модальное окно:

    Метод hide применяется для его скрытия:

    Методы setContent и setTitle предназначены соответственно для изменения контента и заголовка модального окна после его создания.

    В возвращаемом объекте также есть метод destroy . Его необходимо использовать только когда вам необходимо полностью удалить модальное окно из DOM, а также связанные с ним события:

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

    Примеры использования скрипта для создания модальных окон

    1. Пример кода, выполняющий открытие модального окна при нажатии на определённую кнопку.

    2. Пример кода, позволяющий открыть одно и тоже модальное окно посредством клика на разные элементы (определяется элемент, который может открыть это окно, с помощью наличия у него атрибута data-toggle=»modal» ):

    3. Пример, в котором заголовок и содержимое модального окна определяется посредством значений data-атрибутов элемента, с помощью которого оно вызывается:

    4. В этом примере показано как можно в обработчике события «click» для кнопки, расположенной в футере модального окна, получить элемент, посредством которого оно было открыто:

    5. Пример, в котором создано 2 разных модальных окна. Первое модальное окно открывается при нажатии на одни элементы, а второе – при клике на другие:

    6. Пример всплывающего окна, данные в которое загружаются с использованием AJAX:

    Пример содержимого файла «json-1»:

    7. Этот пример содержит код для обработки различных событий, связанных с модальном окном и кнопками, расположенными в нём:

    Описание скрипта модального окна

    В этом разделе приведена информация для тех, кто хочет более подробно разобраться с тем, как работает это модальное окно.

    Её JavaScript код представлен посредством функции $modal :

    В качестве результата эта функция возвращает объект, состоящий из 5 методов. Они позволяют нам выполнять различные действия над созданным модальным окном. Назначение каждого метода, а также различные примеры как их использовать мы уже подробно рассмотрели выше. Здесь мы более подробно разберём внутренние переменные и функции $modal .

    В $modal имеются следующие переменные _elemModal , _eventShowModal , _eventHideModal , _hiding , _destroyed , _animationSpeed и функции _createModal , _showModal , _hideModal , _handlerCloseModal .

    Функция _createModal предназначена для формирования HTML-кода модального окна (DOM структуры) и добавления её на страницу. В качестве результата она возвращает ссылку на базовый элемент этого модального окна. Т.к. нам эта ссылка нужна в других частях $modal , то сохраним её в переменную _elemModal :

    Переменные _eventShowModal и _eventHideModal применяются для хранения созданных нами кастомных событий «show.modal» и «hide.modal». Событие «show.modal» мы будем вызывать при открытии модального окна, а «hide.modal» – при закрытии. Эти события будем генерировать для объекта document . Используя их, вы можете очень просто добавить свою логику при открытии и закрытии модального окна:

    Переменные _hiding и _destroyed используются для хранения состояний. Первая применяется для индикации процесса скрытия модального окна. Она имеет значение true во время скрытия окна, в остальных моментах — false . Вторая переменная хранит true или false , в зависимости от того, удалены ли DOM элементы модального окна со страницы и связанные с ним события или нет.

    Переменная _animationSpeed используется для указания времени длительности процесса скрытия модального окна (в миллисекундах).

    Функция _showModal предназначена для включения отображения модального окна на странице, а _hideModal – для его скрытия.

    Функция _handlerCloseModal используется в качестве обработчика события «click» для документа и выполняет скрытие модального окна при нажатии на кнопку его закрытия или вне его.

    Источник

    Поделиться с друзьями