Модальное окно на чистом CSS
HTML&CSS

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

CSS3 дает разработчикам возможность делать некоторые ыещи, которые раньше были возможны только с JavaScript. В этом уроке мы создадим модальное окно только с помощью HTML и CSS. Для открытия модального окна будем использовать псевдо-класс :target.

Псевдо-класс :target работает так же, как остальные псевдо-классы, например, :hover или :active. При наведении курсора мыши на элемент, активируеся состояние элемента :hover. Состояние :target становится активным, когда хеш в адресной строке браузера совпадает с id элемента. К примеру, модальное окно имеет id = «modal», состояние :target элемента будет активировано, когда хеш в адресной строке будет равен #modal. Мы будем использовать это для показа модального окна.

HTML


<aside class="modal" id="modal">
    <header>
        <h2>Заголовок модального окна</h2>
    </header>
    <section>
        Можно предположить, что комплексное число недоказуемо. Ортогональный определитель, в первом приближении, порождает интеграл от функции, обращающейся в бесконечность в изолированной точке. Огибающая семейства поверхностей отрицательна. Подынтегральное выражение раскручивает криволинейный интеграл.
    </section>
    <footer class="footer">
        <a href="#" class="btn">Закрыть</a>
    </footer>
</aside>

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

CSS


/* Стили для неактивного модального окна */
.modal {
    background: #fff;
    left: 50%;
    margin: -250px 0 0 -40%;
    position: absolute;
    top: -50%;
    width: 80%;
    border-radius: 5px;
    box-shadow: 0 3px 7px rgba(0,0,0,.25);
    -moz-box-shadow: 0 3px 7px rgba(0,0,0,.25);
    -webkit-box-shadow: 0 3px 7px rgba(0,0,0,.25);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}


/* Активация модального окна в состоянии :target */
.modal:target {
    top: 50%;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}

.modal header, .modal footer {
    background: #f7f7f7;
    border-bottom: 1px solid #e7e7e7;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
}
.modal footer {
    border:none;
    border-top: 1px solid #e7e7e7;
    border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
}
.modal section, .modal header, .modal footer {
    padding: 15px;
    z-index: 200;
}
.modal h2 {
    margin: 0;
}
.modal .btn {
    float: right;
}

Модальное окно имеет два набора стилей, один для неактивного состояния (окно скрыто), второй для активного. В скрытом состоянии мы задали модальному окну свойство top: −50%, чтобы скрыть его с экрана. В активном состоянии свойство top равно «50%», к тому же мы использовали CSS transitions, чтобы окно «выплывало» сверху. Здесь также можно использовать просто display: none.

Чтобы скрыть модальное окно, нужно всего лишь изменить хеш в адресной строке. Для этого мы использовали ссылку с href="#".

Чтобы открыть модальное окно, на страницу можно добавить ссылку с href="#modal":


<a href="#modal">Открыть модальное окно</a>

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

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться