Модальная форма контактов на jQuery

Простейший вариант реализации модальной формы контактов с помощью плагина jQuery

by Andrey Dobrovoi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<input type="button" class="trigger" value="Открыть">
<div class="overlay">
      <div class="modal">
       <span class="close"></span>
        <div class="modal-body">
             <p>Предполагалось, что большинство галактических источников радиоизлучения являются объектами входящими. Источниками радиоизлучения ожидает участь неотождествимости источников радиоизлучения. Распределенных по всему небу более многочисленная, состоит. Тогда гипотетические радиозвезды, существование которых опровергается. Создалось несколько странное обстоятельство гипотеза о тщетности попыток. Астрономы пришли к плоскости галактики и следовало ожидать, являются объектами, входящими. Вторая же пылевая межзвездная среда прозрачна, радиоизлучение доходит беспрепятственно большинство.</p>
    <p style="text-align: right;"><a href="http://dbmast.ru">/shurawi/</a></p>
        </div>
      </div>
 </div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);
* {
    box-sizing: border-box;
}
html{
  width: 100%; height: 100%;
}
body {
  min-height: 100vh;
  color: #333333;
  background-color: #D4DBE2;
  font-family: "Open Sans", sans-serif;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

.trigger {
  -webkit-transition: background-color 200ms ease-in-out;
  transition: background-color 200ms ease-in-out;
  color: white;
  width: 200px;
  padding: 18px 0;
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #388e3c;
  border: none;
  outline: none;
  font-size: 20px;
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.trigger:hover {
  background-color: #43a047;
}
.trigger:active {
  background-color: #2e7d32;
}
/* Overlay and Modal */
.overlay {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  visibility: hidden;
  -webkit-transition: visibility 800ms ease-in-out, opacity 500ms ease-in-out;
  transition: visibility 800ms ease-in-out, opacity 500ms ease-in-out;
  opacity: 0;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
   align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
   justify-content: center;
}

.is-open {
  visibility: visible;
  opacity: 1;
}

.modal {
  max-width: 600px;
  border-radius: 12px;
  background-color: white;
  border: 8px solid rgb(134, 134, 134);
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
  position: relative;
}
.modal-body {
  padding: 20px;
}

/* формируем кнопку закрытия */
.close {
    background-color: rgba(61, 61, 61, 0.8);
    border: 2px solid #ccc;
    height: 25px;
   ...

JavaScript

$(document).ready(function() {
  $('.trigger').click(function() {
    $('.overlay').addClass('is-open');
  })
  $('.close').click(function() {
    $('.overlay').removeClass('is-open');
  })
})