Простое модальное окно на JS

Для анимации появления и удаления модального окна используется CSS библиотека animate.css

Пример:

В примере использованы эффекты bounceIn для открытия (он в HTML) и bounceOutDown для закрытия (он в JS). Другие варианты можно выбрать из библиотеки animate.css

HTML:

<a class="open_modal" href="#open">Открыть окно</a>
<div id="modal" class="modal bounceIn">
	<div id="close_modal">+</div>
	<div class="modal_txt">Текст в модальном окне</div>
</div>

<a class="open_modal" href="#open">Открыть окно</a>

<div class="modal_txt">Текст в модальном окне</div>

</div>

CSS:

Добавляем animate.min.css или animate.css или только классы этой библиотеки, которые используем и:

.modal {
	display: none;
	background: #337AB7;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 99999;
}
.modal_vis {
	display: block;
}
.body_block {
	overflow: hidden;
	margin-right: 17px;
}
#close_modal {
	color: #BFE2FF;
	font-size: 40px;
	font-weight: bold;
	font-family: Times, sans-serif;
	border-radius: 50%;
	border: 4px solid #BFE2FF;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	margin: 20px;
	cursor: pointer;
	position: absolute;
	right: 0;
	transform: rotate(45deg);
	transition: all 0.6s;
	box-sizing: content-box;
}
#close_modal:hover {
	color: #FFF;
	transform: rotate(135deg);
}
.modal_txt {
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
	background: #FFF;
	padding: 30px;
	margin: 100px auto;
	max-width: 800px;
}

.modal {

display: none;

background: #337AB7;

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

z-index: 99999;

}

.modal_vis {

display: block;

}

.body_block {

overflow: hidden;

margin-right: 17px;

}

#close_modal {

color: #BFE2FF;

font-size: 40px;

font-weight: bold;

font-family: Times, sans-serif;

border-radius: 50%;

border: 4px solid #BFE2FF;

width: 50px;

height: 50px;

line-height: 50px;

text-align: center;

margin: 20px;

cursor: pointer;

position: absolute;

right: 0;

transform: rotate(45deg);

transition: all 0.6s;

box-sizing: content-box;

}

#close_modal:hover {

color: #FFF;

transform: rotate(135deg);

}

.modal_txt {

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

background: #FFF;

padding: 30px;

margin: 100px auto;

max-width: 800px;

}

JS:

Описание работы скрипта даны в комментариях

let open_modal = document.querySelectorAll('.open_modal');
let close_modal = document.getElementById('close_modal');
let modal = document.getElementById('modal');
let body = document.getElementsByTagName('body')[0];
for (let i = 0; i < open_modal.length; i++) {
	open_modal[i].onclick = function() { // клик на открытие
		modal.classList.add('modal_vis'); // добавляем видимость окна
		modal.classList.remove('bounceOutDown'); // удаляем эффект закрытия
		body.classList.add('body_block'); // убираем прокрутку
	};
}
close_modal.onclick = function() { // клик на закрытие
	modal.classList.add('bounceOutDown'); // добавляем эффект закрытия
    window.setTimeout(function() { // удаляем окно через полсекунды (чтобы увидеть эффект закрытия).
		modal.classList.remove('modal_vis'); 
		body.classList.remove('body_block'); // возвращаем прокрутку
	}, 500);
};

let open_modal = document.querySelectorAll('.open_modal');

let close_modal = document.getElementById('close_modal');

let modal = document.getElementById('modal');

let body = document.getElementsByTagName('body')[0];

for (let i = 0; i < open_modal.length; i++) {

open_modal[i].onclick = function() { // клик на открытие

modal.classList.add('modal_vis'); // добавляем видимость окна

modal.classList.remove('bounceOutDown'); // удаляем эффект закрытия

body.classList.add('body_block'); // убираем прокрутку

};

}

close_modal.onclick = function() { // клик на закрытие

modal.classList.add('bounceOutDown'); // добавляем эффект закрытия

window.setTimeout(function() { // удаляем окно через полсекунды (чтобы увидеть эффект закрытия).

modal.classList.remove('modal_vis');

body.classList.remove('body_block'); // возвращаем прокрутку

}, 500);

};

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

Похожие модальные окна реализует jQuery плагин animatedModal.js

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

Протестировать на мобильном Сгенерировать QR-код для перехода на эту страницу с телефона

Опубликовано: 31.10.2019 / Обновлено: 18.02.2021
Рубрики: Модальные окна
Метки: CSS, JavaScript, Авторское
21383 просмотра

Смотрите также:

Наклонная галерея

Небольшой скрипт на jQuery с наклонной каруселью фотографий

Анимированные полноэкранные модальные окна

Плагин jQuery animatedModal.js для создания анимированных полноэкранных модальных окон

Fancybox 3 с темой оформления

jQuery плагин Fancybox 3, его быстрое подключение, настройка и тема оформления

Добавить комментарий:

Ваш комментарий отправлен!

СЕРГЕЙ: 24.03.2023 в 23:50

Подскажите как установить animate.css

Ответить
Алексей: 10.10.2022 в 22:18

Спасибо! сравнительно не давно начал изучать фронтенд. И захотелось вот модальное окно добавить в проект. Подредактировал только по себя в сss чтобы окно открывалось не на полный экран а частично, чтобы на заднем фоне все таки была видна основная страница. Работает все прекрасно! , еще раз спасибо

Ответить
Андрей: 08.11.2021 в 04:31

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

Ответить
- Alexander: 08.11.2021 в 07:41
  
  Не работает тут или у вас?
  А про полный код, куда уж полнее, есть же все.
  И в комментариях ниже есть пример на codepen
  
  Ответить
Андрей: 02.09.2021 в 18:34

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

Ответить
- Alexander: 04.09.2021 в 07:44
  
  Отсюда можно взять куки. В примере их нет, но в коде описано.
  
  Ответить
Анатолий: 31.03.2021 в 08:28

Что делать если мне нужно два модальных окна и нужно открывать их разными ссылками.
<a class="open_modal" href="#open">Открыть окно - 1</a>
<a class="open_modal" href="#open">Открыть окно - 2</a>
как это реализовать?

Ответить
- Alexander: 31.03.2021 в 09:56
  
  Частично скрипт дублировать или менять, а лучше использовать уже что то профессиональное для модальных окон.
  
  Ответить
  - Владимир: 28.03.2023 в 12:03
    
    Доброго дня. Обратил внимание что в таких ситуациях весь скрипт наверное не нужно дублировать. Через запятую modal2 в самом скрипте сделать а html дублировать. Или label как то можно настроить. Или есть полегче способ?
    
    Ответить
Егор: 22.02.2021 в 21:35

Эта строка в HTML
<a class="open_modal" href="#open">Открыть окно</a>
что запускает? Куда ведет ссылка #open?
У меня не получается собрать все это в работающий пример.
Помогите разобраться. Или выложите сборку файлов с запуском из html.

Ответить
- Alexander: 23.02.2021 в 10:59
  
  Строка запускает модальное окно, она может быть ссылкой или любым другим элементом.
  Если используется ссылка, то #open ведет в никуда, т.к. просто решетка будет кидать вверх страницы.
  Вот пример на codepen
  
  Ответить
  - Егор: 23.02.2021 в 14:31
    
    Александр, спасибо за скорый ответ. Но у меня что то не запускается. Я правильно понял, что текст из CSS я подключаю через style, а JS подключаю через script type="text/javascript". HTML помещаю в body. Доп. библиотеку (animate.min.css) я подключаю через link как у вас. Я понимаю так, что class="open_modal" передает управление в скрипт и далее рулит уже он?
    
    Ответить
    - Егор: 23.02.2021 в 15:05
      
      Все заработало, после того как я перенес link на animate.min.css и скрипт из head в body.
      Спасибо.
      
      Ответить
Виталий: 16.02.2021 в 23:46

Хорошее окно. Спасибо автору.

Ответить
Алексей: 14.02.2021 в 11:32

А как сделать чтобы работала несколько ссылок на одной странице. Я сделал 3 ссылки, а работает только одна.

Ответить
- Alexander: 14.02.2021 в 19:29
  
  А несколько и не будет...
  Тут все через ID сделано.
  Или окно одно, а только кнопок несколько?
  
  Ответить
  - Алексей: 16.02.2021 в 21:50
    
    Да, окно одно а ссылок несколько. Как сделать?
    
    Ответить
    - Alexander: 18.02.2021 в 12:53
      
      Поправил код в статье
      
      Ответить
      - Алексей: 18.02.2021 в 20:16
        
        let body = document.getElementsByTagName('body')[0];[code]
        
        А для чего вот эта строчка?
        
        Ответить
        
        Alexander: 18.02.2021 в 22:43
        
        Определяем body, чтобы убрать и вернуть потом у него прокрутку.
        
        Ответить
Pavel: 07.09.2020 в 11:05

Добрый день! Спасибо за пример. Подскажите пожалуйста как правильно добавить скроллинг в это модальное окно?

Ответить
- Alexander: 07.09.2020 в 12:03
  Можно так:
  
  .modal_txt { max-height: calc(80vh - 100px); overflow-y: auto; }
  Ответить
  - Pavel: 08.09.2020 в 20:18
    
    Большое человеческое спасибо!
    
    Ответить
Игорь: 15.11.2019 в 09:45

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

Подскажите, что мог сделать не так?
Спасибо.

Ответить
- Alexander: 15.11.2019 в 10:33
  Что то не так с ссылкой скорее всего. А если открыть через спан например?
  
  <span id="open_modal">Открыть окно</span>
  
  А вообще сложно без примера угадать
  Ответить
  - Игорь: 15.11.2019 в 16:36
    
    Хорошо, спасибо, буду пробовать, если не получится, тогда отображусь с проблемой))
    
    Ответить
Кэт: 03.11.2019 в 02:35

Спасибо тебе огромное, ты чудо!!!

Ответить