Бесплатное в сети!
» » Как сделать модальное окно на css

Как сделать модальное окно на css

Модальное окно

Модальное, либо всплывающее окно (называют по-разному) – это очень распространённый элемент html применяемый на веб-сайте. Основное его назначение это вывод различной информации (в основном текстовой и при наличие нескольких картинок), которая появляется при нажатие на какой-либо специальный объект (ссылка, кнопка или фото).

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

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

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

Пример всплывающего модального окна ( нажмите ).


Открыть модальное окно


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

html код для модального окна.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style type="text/css">
.my_modal{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.5);z-index:1050;display:none;margin:0;padding:0;}.my_modal:target{display:block;overflow-y:auto;}.my_modal-dialog{position:relative;width:auto;margin:10px;}@media (min-width:576px){.my_modal-dialog{max-width:460px;margin:30px auto;}}.my_modal-content{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;}@media (min-width:768px){.my_modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5);}}.my_modal-header{display:block;padding:14px 14px 4px;}.my_modal-title{margin-top:0;margin-bottom:0;line-height:1.5;font-size:1.25rem;font-weight:500;border-bottom:1px solid #d4d4d4;}.close{padding:1px 5px 0;border:1px solid #000;border-radius:50%;font-family:sans-serif;font-size:24px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5;text-decoration:none;top:4px;right:4px;position:absolute;}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.75;}.my_modal-body{position:relative;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:15px;overflow:auto;}
</style>
</head>

<body>
<a href="#modal_open">Открыть модальное окно</a>
<div id="modal_open" class="my_modal">
  <div class="my_modal-dialog">
    <div class="my_modal-content">
      <div class="my_modal-header">
        <p class="my_modal-title">Заголовок модального окна</p>
        <a href="#" title="Закрыть модальное окно" class="close">×</a>
      </div>
      <div class="my_modal-body">    
        <p>Здесь прописана текстовая информация модального окна ...</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Скопируйте, вставьте и сохраните вышеуказанный код в текстовый документ под именем index.html и после откройте его в браузере для проверки работоспособности модального окна. Здесь же вы можете и подкорректировать внешний вид модального окна исходя из дизайна вашего проекта.

Я к примеру, для вывода определённой информации частенько использую модальное окно в качестве алерт сообщение с различными анимационными эффектами, что смотрится куда-более интересным.


Модальное окно при нажатии на кнопку

В этом примере я покажу как прописать кнопку для открытия модального окна.
Для этого нам нужно лишь добавить в коде для кнопки и для блока модального окна атрибут HTML onclick и тем самым вызвать функцию с определённым именем.

Здесь же я добавил для модального окна в стилевом оформление плавное появление и закрытие окна, изменив вместо обычного display на параметры: visible и opacity.

Пример кнопки для вызова модального окна ( нажмите ).


Модальное окно кнопка


Пропишите свойства и значения для модального окна:

Код стилевого оформления модального окна.

<style type="text/css">
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 999;
    overflow: auto;
    visibility:hidden;
    opacity: 0;
    transition: opacity 0.7s ease-in 0s;
}
.popup {
    top: 10%;
    left: 0;
    right: 0;       
    font-size: 14px;
    margin: auto;
    width: 80%;
    min-width: 200px;
    max-width: 600px;
    position: absolute;
    padding: 15px 20px;
    border: 1px solid #666;
    background-color: #fefefe;
    z-index: 1000;
    border-radius: 10px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
    box-shadow: 0 0px 14px rgba(0, 0, 0, 0.4);
}
.close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    position: absolute;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 130, 230, 0.9);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    cursor: pointer;
    outline: none;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-family:  Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: rgba(180, 20, 14, 0.8);
}
#overlay .popup p.zag{margin:20px 0 10px;padding:0 0 6px;color:tomato;font-size:16px;font-weight:bold;border-bottom:1px solid tomato;}
</style>

Далее скопируйте и вставьте html код модального окна:

HTML код модального окна.

<div id="overlay">
  <div class="popup">
    <button class="close" title="Закрыть окно" onclick="document.getElementById('overlay').style='visibility:hidden;opacity:0;transition:all 0.7s ease-out 0s';"></button>
    <p class="zag">Модальное окно</p>
    <p>Первая текстовая информация ...</p>
    <p>Вторая текстовая информация ...</p>
    <p>Последующая текстовая информация ...</p>
  </div>
</div>

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

Код кнопки для модального окна.

<button onclick="getElementById('overlay').style='visibility:visible;opacity:1';" type="button">Модальное окно</button>

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

Код ссылки для модального окна.

<a href="#" onclick="getElementById('overlay').style='visibility:visible;opacity:1';">Модальное окно</a>

Делитесь с друзьями и задавайте вопросы, если что-то не получается при создание модального окна.


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

Модальное окно

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

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

Простейшая анимация появления с помощью изменения свойства прозрачности (opacity) от 0 к 1