Модальное окно с тёмной цветовой схемой.
Всё началось с того, что на рабочем проекте понадобилось простенькое модальное окно. «fancyBox» мега-универсальный, очень многофункциональный, но слишком большой и на то время ещё имевший несколько багов при работе на iOS, нужно было простейшее решение. Написал, столкнулся с тем же рядом проблем, включая адаптацию и корректную поддержку iOS, углубился в изучение всех нюансов, придумал практичные фиксы, поэкспериментировал, потестил и в итоге получилась "Лёгкая jQuery Модалочка" с названием «umodal». Если будет спрос - буду поддерживать и развивать, пока просто оставлю её здесь, вдруг тебе пригодится.
Всё как всегда:
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="umodal.min.css">
<script src="umodal.min.js"></script>
Для работы с «umodal» необходимо добавить элементу класс umodal__open. Это может быть любой элемент: ссылка, кнопка, изображение, текстовый блок и т.д. Если это ссылка, то значение атрибута href игнорируется, если это не изображение.
Создаём ссылку со специальным атрибутом umodal-id, который свяжет её с блоком для модального окна:
<a href="link" umodal-id="my-modal-2" class="umodal__open">Модальное окно</a>
В любом месте страницы создаём блок с таким же атрибутом и значением, он будет содержимым модального окна:
<div umodal-id="my-modal-2">
<h2>Содержимое модального окна</h2>
<p>Для закрытия модального окна можно также использовать клавишу <b>Esc</b></p>
</div>
Результат:
Обратите внимание, что значение атрибута href игнорируется, если это не ссылка на изображение.
Для открытия изображения в модальном окне нужно лишь указать на него ссылку:
<a href="/img/demo.jpeg" class="umodal__open">Модальное окно c изображением</a>
Результат:
Чтобы загрузить в модальное окно содержимое другой страницы, необходимо указать её адрес в атрибуте umodal-src.
Если загружаемая страница содержит полную структуру HTML-документа, включая тег <body>, то из страницы автоматически отфильтруется всё лишнее и будет загружен только контент, который находится внутри тега <body>. Иначе содержимое страницы будет загружено полностью.
По умолчанию используется HTTP-заголовок {accept: 'text/html'}. С помощью атрибута umodal-accept можно указать любой из следующих заголовков:
umodal-accept="xml"umodal-accept="json"Создаём ссылку со специальным атрибутом umodal-src:
<a href="another.html" umodal-src="another.html" class="umodal__open">Модальное окно AJAX</a>
Результат:
Также можно загрузить содержимое из определённого блока другой страницы, для этого есть специальный атрибут umodal-content, в значении которого нужно указать соответствующий блок:
umodal-content=".class"umodal-content="#id"Создаём ссылку со специальными атрибутами umodal-src и umodal-content:
<a href="test" umodal-src="another.html" umodal-content=".content" class="umodal__open">Модальное окно AJAX</a>
Результат:
Чтобы добавить дополнительный класс для модального окна любого типа, необходимо сооответствующему элементу с классом umodal__open добавить атрибут umodal-class со значением нужного класса.
Создаём ссылку со специальным атрибутом umodal-class:
<a href="link" class="umodal__open" umodal-id="custom-class" umodal-class="my-class">Модальное окно с дополнительным классом "my-class"</a>
Результат:
Помимо этого у самого первого родительского блока модального окна автоматически генерируется уникальный класс по следующей формуле: "umodal_" + значение из атрибута
umodal-id.Благодаря этим штукам можно идентифицировать любое модальное окно на странице и, например, задать для каждого разные стили.
Предусмотрено две цветовых 'темы' модуля:
Для смены цветовой темы на тёмную необходимо указать дополнительный класс umodal_inverse с помощью соответствующего атрибута umodal-class:
<a href="link" umodal-id="dark-umodal" umodal-class="umodal_inverse" class="umodal__open">Модальное окно в тёмной цветовой схеме</a>
Результат:
Неважно, есть ли атрибут href и какое его значение - ссылка не будет открыта.
Но при этом ссылку всегда можно открыть в новом окне.
Исключение: модальное окно для изображений. В этом случае изображение будет открыто по ссылке из атрибута href.
Закрыть модальное окно можно также с помощью клавиши Esc.
Для закрытия модального окна можно также использовать клавишу Esc
my-classТеперь у этого окна появился дополнительный класс. Хотя это и удобная фича, но стоит сказать, что у самого первого родительского блока модального окна автоматически генерируется уникальный класс по следующей формуле: "umodal_" + значение из атрибута umodal-id. То есть у данного модального окна также имеется класс umodal_custom-class.
Благодаря этим штукам можно идентифицировать любое модальное окно на странице и, например, задать для каждого разные стили.
Если требуется закрыть модальное окно при нажатии на какой-либо элемент, то необходимо добавить ему класс umodal__shut.
Модальное окно с тёмной цветовой схемой.
Модальное окно с тёмной цветовой схемой.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium repellendus mollitia ex fugit, autem quo voluptatum rem eum odit unde dignissimos! Veniam sed laudantium nulla voluptatem, doloribus, debitis perspiciatis eveniet, magnam esse amet, rerum vero in culpa ex tempora pariatur odio doloremque minus consequuntur nihil. Excepturi quibusdam perferendis saepe beatae?