Создаём модальное окно для web приложения на чистом CSS

В самой первой статье рубрики «Frontend разработка» мы уже рассматривали создание модальных окон для web приложений и использовали для этого JavaScript. Однако эта задача также может быть успешно решена и при помощи CSS.

Дело в том, что CSS 3 умеет самостоятельно обрабатывать некоторые события при помощи псевдоклассов тем самым позволяя избежать использования для этой цели JavaScript

Так как обычно модальное окно отображается по клику на определённом элементе страницы для решения данной задачи подойдёт псевдокласс target.

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

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

<a id="show" href="#overlay">Показать модальное окно!</a>
<div class="overlay" id="overlay">
    <div class="modal" >
        <span class="close"><a href="#">X</a></span>
        <h3>Модальное окно</h3>
        <p>Текст в модальном окне</p>
    </div>
</div>

<a id="show" href="#overlay">Показать модальное окно!</a>

<h3>Модальное окно</h3>

<p>Текст в модальном окне</p>

</div>

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

Ниже приведены стили страницы.

.close{
    position: absolute;
    right: 15px;
    text-align: center;
    top:15px;
}
.close a{
    color:black;
    text-decoration: none;
}
.modal{
    background-color: white;
    height: 300px;
    left:50%;
    margin-left: -200px;
    margin-top:-150px;
    position: fixed;
    top:50%;
    width: 400px;
    z-index: 1000;
}
.overlay{
    background-color: black;
    bottom:0;
    display: none;
    left:0;
    margin: 0;
    opacity: 0.65;
    position: fixed;
    top:0;
    right: 0;
    z-index: 999;
}
.overlay:target{
    display:block;
}

.close{

position: absolute;

right: 15px;

text-align: center;

top:15px;

}

.close a{

color:black;

text-decoration: none;

}

.modal{

background-color: white;

height: 300px;

left:50%;

margin-left: -200px;

margin-top:-150px;

position: fixed;

top:50%;

width: 400px;

z-index: 1000;

}

.overlay{

background-color: black;

bottom:0;

display: none;

left:0;

margin: 0;

opacity: 0.65;

position: fixed;

top:0;

right: 0;

z-index: 999;

}

.overlay:target{

display:block;

}

Блок, который является собственно окном (класс modal) вложен в блок для эффекта затемнения (класс overlay) не случайно.

Во-первых, по ссылке можно перейти только к одному целевому элементу. Соответственно псевдокласс target также может отработать только для единственного элемента. Не более.

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

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

Пример разметки:

<a id="show" href="#modal">Показать модальное окно!</a>
    <div class="modal" id="modal" >
    <span class="close"><a href="#">X</a></span>
    <h3>Модальное окно</h3>
    <p>Текст в модальном окне</p>
</div>

<a id="show" href="#modal">Показать модальное окно!</a>

<h3>Модальное окно</h3>

<p>Текст в модальном окне</p>

</div>

Пример скорректированных стилей:

.modal{
    background-color: white;
    display:none;
    height: 300px;
    left:50%;
    margin-left: -200px;
    margin-top:-150px;
    position: fixed;
    top:50%;
    width: 400px;
    z-index: 1000;
}
.modal:target{
    display:block;
}

.modal{

background-color: white;

display:none;

height: 300px;

left:50%;

margin-left: -200px;

margin-top:-150px;

position: fixed;

top:50%;

width: 400px;

z-index: 1000;

}

.modal:target{

display:block;

}

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

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