В этой небольшой записи, я хочу поделиться с вами модальный окном, которое было сделано в стиле Material Design. 

Демо

Во весь экран модальное окно можно посмотреть по этой ссылке.

Установка

Все что нужно будет сделать — это добавить HTML каркас модального окна, установить стили и немного jQuery (чтобы центрировать модальное окно).

HTML

<div class="modal modal-material modal-center">
  <div class="modal-body"> 
    <h1>Заголовок для MD окна</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet nisi sem. Morbi egestas nunc mi. In eros lacus, maximus lobortis felis nec, tincidunt malesuada tortor. Praesent id lectus urna. Quisque vitae volutpat nibh. 
    </p>
  </div>
  <div class="modal-bottom">
    <ul>
      <li class="right"><a href="#">Отменить</a></li>
      <li class="right"><a href="#">ОК</a></li>
    </ul>
  </div>
</div>

HTML каркас этого модального окна очень простой. Он не включает ничего особенно. В нем есть .modal-body, который отвечает, за тело окна, то есть текст и все что будет писать внутри него и .modal-bottom — это часть где происходят все события (нажатия на кнопки, например «ОК» или «Отменить».

CSS

Для демо примера, который я показал вам выше, я использовал SCSS. Код ниже представлен уже в скомпилированном виде, то есть обычный CSS. Если вам нужно SCSS (исходник), то пожалуйста вернитесь к демо и скопируйте код от туда.

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700&subset=latin,cyrillic,cyrillic-ext);
body {
  font-family: Roboto, sans-serif;
  font-size: 12pt;
  background: #eee url("http://img1.gtsstatic.com/wallpapers/3e9cafa717025ccf25667b8f44ff1460_large.jpeg") no-repeat center center;
}

.modal {
  background-color: #fff;
  width: 400px;
  height: auto;
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 15px;
  border-radius: 3px;
  box-shadow: 0px 9px 29px 3px rgba(0, 0, 0, 0.31);
}
.modal-body, .modal-bottom {
  width: 100%;
  float: left;
}
.modal-body, .modal-body p, .modal-body h1, .modal-body h2, .modal-body h3, .modal-body h4, .modal-body h5, .modal-body h6 {
  color: #000;
}
.modal-body h1 {
  font-weight: 700;
  font-size: 20pt;
  margin-bottom: 5px;
  line-height: 1.5;
}
.modal-body p, .modal-body span, .modal-body div {
  font-size: 12pt;
  font-weight: 400;
  line-height: 1.55;
  color: #7F7F7F;
}
.modal-body p {
  margin-bottom: 15px;
}
.modal-body p:last-of-type {
  margin-bottom: 0;
}
.modal-bottom {
  margin-top: 20px;
}
.modal-bottom ul {
  list-style: none;
  width: 100%;
}
.modal-bottom ul li.left {
  float: left;
  margin-right: 20px;
}
.modal-bottom ul li.right {
  float: right;
  margin-left: 20px;
}
.modal-bottom ul li {
  display: inline-block;
}
.modal-bottom ul li a {
  text-decoration: none;
  font-weight: 500;
  color: #4889F4;
}
.modal-bottom ul li a:hover, .modal-bottom ul li a:active, .modal-bottom ul li a:focus {
  color: #244F96;
}

В целом в CSS я лишь добавляю ширину, цвет и тень для модального окна. Так же добавляю некоторые стили для корректного отображения типографии, например для p тега. А так в целом все очень просто. Ничего очень сложного здесь нет. Если у вас возникли какие-либо вопросы — задавайте их в комментарии под этой записью.

jQuery

С помощью jQuery я все лишь делаю расположение модального окна по центру.

$el = $('.modal-center');

$(document).ready(function() {

  // Сделать модальное окно по центру изначально
  centerModal();

  // Если размер экрана меняется, то снова установить расположение модального окна по центру
  $(window).resize(function() {
    centerModal();
  });

  // Функция, которая отвечает за центрирование модального окна
  function centerModal() {
    $el.css({
      'margin-top': -($el.height() / 2),
      'margin-left': -($el.width() / 2)
    });
  }
});

В целом, все описано в коде. Самое важное, это функция centerModal(), которая центрирует модальное окно. Эта функция вызывается в двух случается. Первый — это когда пользователь только загрузил страницу и второй — это когда у него меняется размер экрана (становиться меньше/больше по высоте/ширине).

А что вы используете для модальных окошек на вашем сайте?

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