Артём Мáлков

Простое адаптивное модальное окно для сайта на HTML+CSS+jQuery

9 фев8 комм

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

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

Наше модальное окно будет состоять из четырех элементов: верстки (HTML) самого окна и ссылки для его вызова, визуальной составляющей (CSS) и скрипта (jQuery), позволяющего нам вызывать и закрывать модальное окно по клику на нужный объект.

Перед тем как приступить, по традиции визуально покажу то, что в итоге у вас должно получиться:

Простое адаптивное модальное окно для сайта на HTML+CSS+jQuery

Как вам? По-моему, более чем достаточно для того, чтобы на основе этого воплощать уже свои идеи.

Установка модального окна на сайт

Итак, что касается верстки модального окна, то она у нас выглядит следующим образом:

<div class="modal-overlay" data-modal="test">

	<div class="modal-table">

		<div class="modal-table-cell">

			<div class="modal">

				<button class="modal__close"></button>
			
				<div class="modal__header">Небольшой заголовок</div>

				<div class="modal__content">

					<!-- Ваш контент -->

					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien orci, dignissim vel orci sed, ornare tristique erat. Quisque dictum sagittis ipsum ac porttitor. Morbi condimentum feugiat feugiat. Sed commodo vel nunc eget imperdiet. Fusce posuere accumsan ipsum sed finibus. Fusce nibh lacus, varius non lacinia id, sodales eu justo. In commodo lorem nec purus hendrerit, sed semper libero mollis.</p>

					<p>Integer accumsan ante non massa feugiat, quis congue odio luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo tortor cursus, imperdiet libero ac, efficitur lectus. Curabitur volutpat, lacus quis porttitor pretium, purus magna pulvinar odio, a posuere mauris tellus non erat. Phasellus in tincidunt est, in pulvinar mauris. Aenean aliquam malesuada leo.</p>

				</div>

			</div>

		</div>

	</div>

</div>

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

Кнопка (в моем случае ссылка) вызова модального окна:

<button class="modal-link" data-modal="test">Открыть окно</button>

Визуальная составляющая (CSS):

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .6);
	overflow: auto;
	z-index: 999;
	transition: .4s all;
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.modal-overlay *,
.modal-overlay *:before,
.modal-overlay *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

.modal-overlay_visible {
	opacity: 1;
	visibility: visible;
}

.modal-table {
	display: table;
	width: 100%;
	height: 100%;
}

.modal-table-cell {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding: 0 15px;
}

.modal {
	transition: .4s all;
	display: inline-block;
	padding: 35px 45px 20px 30px;
	max-width: 400px;
	width: 100%;
	background: #fff;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, .25);
	color: #333;
	text-align: left;
	font-family: Arial;
	margin: 30px 0;
	transform: translate(0, 20%);
	position: relative;
	border-radius: 4px 6px 4px 4px;
	cursor: auto;
	font-size: 16px;
}

.modal-overlay_visible .modal {
	transform: translate(0);
}

.modal__header {
	font-size: 22px;
	font-weight: 400;
	padding: 0 0 30px 0;
}

.modal__content p {
	padding: 0 0 10px 0;
	margin: 0;
}

.modal__close {
	position: absolute;
	right: 10px;
	top: 0;
	background: #da4d43;
	width: 25px;
	height: 25px;
	border-radius: 0 0 4px 4px;
	transition: .4s all;
	padding: 0;
	border: none;
	cursor: pointer;
}

.modal__close:hover {
	background: #ed5f55;
}

.modal__close:before,
.modal__close:after {
	content: "";
	display: block;
	height: 16px;
	width: 1px;
	transform: rotate(45deg);
	background: #fff;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 0;
	bottom: 0;
}

.modal__close:after {
	transform: rotate(-45deg);
}

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

$(document).ready(function() {

	// Функция открытия модального окна

	$(".modal-link").on("click", function() {

		$('.modal-overlay[data-modal="'+$(this).data('modal')+'"]').addClass("modal-overlay_visible");

	});

	// Функция закрытия модального окна нажатием на кнопку

	$(".modal__close").on("click", function() {

		$(".modal-overlay").removeClass("modal-overlay_visible");

	});

	// Функция закрытия модального окна нажатием вне окна

	$(document).on("click", function(e) {
	
		if($(".modal-overlay_visible").length) {
		
			// Если есть открытое окно

			if(!$(e.target).closest(".modal").length && !$(e.target).closest(".modal-link").length) {
			
				// Если нажали вне его контента и не на ссылку вызова

				$(".modal-overlay").removeClass("modal-overlay_visible");

			}
			
		}

	});

});

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

На что здесь стоит обратить внимание?

  1. Высота модального окна автоматическая и зависит от его содержимого. Если высота модального окна превышает высоту экрана, ему добавляется вертикальная прокрутка.
  2. Связь кнопки вызова модального окна с самим окном настраивается посредством наличия атрибута «data-modal» у обоих составляющих с одинаковым содержимым (в нашем случае - это «test»).
  3. У элемента (это не обязательно должна быть ссылка), вызывающего модальное окно, обязательно должен быть прописан класс «modal-link».
  4. Закрытие окна происходит путем нажатия на соответствующую кнопку и его фон.
  5. Модальное окно можно внедрить на любую CMS (WordPress, Joomla!, 1С-Bitrix, DataLife Engine и другие). Хотя, если говорить о DLE, то в ней уже заложен функционал модальных окон. Подробнее это этом здесь.

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

Рекомендуем к просмотру
Вызов стандартного модального окна в DLE
Хаки
Как сделать экран загрузки (preloader) на сайте на JavaScript?
Статьи и советы
Выполнение функции при наведении на объект на jQuery
Статьи и советы
8
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 3
    4
      •  Пользователь
    15 фев в 21:19

    Артем, добрый день!

    Почему то при полной сборке - на странице видна только кнопка ОТКРЫТЬ, но не активна при этом.

    Т.е. при нажатии = ничего не происходит

    Такая же проблема с красным крестиком ЗАКРЫТЬ. Активность при наведении, цвет меняется при нажатии, но окно не закрывается при этом....

    Не может быть ошибок/опечаток в кодах!

    Максимально, чего удалось добиться - в подвале рабочей страницы сайта была кнопка ОТКРЫТЬ и уже развернутое окно с текстом. При нажатии на кнопку - окно чуть смещается верх или вниз

    Пытался заняться вивисекцией - крестик перенести в другую форму, которая работает при этом, но там он тоже есть в полуживом состоянии, видимо блок java как-то боком вставил в скрипт другой формы

    По файлу классов пересечений нет, т.е. совпадения и противоречия не существуют

      • 1
      4
        •  Пользователь
      16 фев в 14:39

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

      Ляп найден, форма вставлена, все работает, письма уходят по назначению

      Для примера есть готовая тестовая страничка, но я пошел по пути сборки: папка с файлами исполнительных скриптов и блок вывода на рабочей странице сайта.

      В итоге очень стильно выглядит, если причесать все как следует. Большое спасибо за разработку!

      • 0
      1069
        •  Команда Pandoge
      17 фев в 13:32

      Михаил Климов, очень рад, что удалось достигнуть желаемого результата!

      • 1
      4
        •  Пользователь
      18 фев в 01:01

      Артём Мáлков,

      вот так в "причесаном виде":

      [url]https://disk.yandex.ru/i/kV_EzfapDrAZTQ[/url]
      • 0
      1069
        •  Команда Pandoge
      26 фев в 04:11

      Михаил Климов, здравствуйте!

      Подскажите, как вы подтвердили почту на сайте? У нас был небольшой сбор в работе уведомлений. Вам пришло письмо со ссылкой для подтверждения?

      • 1
      4
        •  Пользователь
      19 мар в 13:47

      Артём Мáлков, а вот сейчас даже и не вспомню точно - поздно увидел вопрос... но скорее всего да, и.к. в профиле мыло стоит как подтвержденное

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

      в итоге просто скомбинировал ваше и

      <a href="https://atuin.ru/blog/stilizovannaya-rabochaya-forma-obratnoj-svyazi/">вот это</a>
      , с надцатой попытки вместо "ежа и ужа" вышло приличное окошко! :))) Ему именно и не хватало крестика для закрытия из окна прямо smiley

    • 5
    1
      •  Пользователь
    12 окт в 09:48

    Добрый день Артем. Есть задача по модернизации этой формы. Нужно сделать так чтобы она грузилась сразу при переходе на сайт. Добавить кнопку продолжить. И добавить скрипт на проверку бота. Не могу получить ваши контакты. Свяжитесь пожалуйста со мной если можете.

      • 4
      1069
        •  Команда Pandoge
      изменено 16 янв в 23:08

      Айдар, здравствуйте!

      Что должна делать кнопка "Продолжить" и для чего именно нужно определять ботов?

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

      $(document).ready(function() {
      
      	$('.modal-overlay[data-modal="test"]').addClass("modal-overlay_visible");
      
      });

      Где test - идентификатор вашей формы.

Подняться наверх
«Pandoge» - помощник вебмастера