Как сделать всплывающее (pop-up) окно?

Как сделать всплывающее (pop-up) окно — вопрос, который будоражит ум любого молодого начинающего программиста. И сегодня мы рассмотрим, как сделать данное всплывающее окно. Сразу немного забегу вперед, ибо то, что мы сделаем, будет поистине очень и очень интересным и функциональным.

Огромное преимущество данного метода создания такого окна заключается в том, что мы не будем использовать JavaScript, а ограничимся исключительно моим любимым CSS3 и HTML5. Этим самым мы убьем сразу несколько зайцев. Во-первых, облегчим загрузку нашего сайта, во-вторых, реализуем все в удобном и легком виде с минимальным использованием кода, что позволит Вам самостоятельно придать Вашему всплывающему окну любые размеры, цвета, формы. Я думаю — это здорово. Итак, приступим.

Представьте, у Вас уже есть сайт и Вы хотите, где-то внедрить кнопку, например, «регистрация» или «онлайн заявка». И Вы хотите, чтобы пользователь, нажав на эту кнопку, увидел окошко небольшого размера, которое позволяет ввести в него какие-то данные, а затем отправить их администратору сайта. Вот такое вот окно мы с Вами и будем сейчас делать.

Для начала мы создадим эту кнопку, я думаю, Вы и без особого труда это сделаете. Но в тег <a href> Вы должны вписать следующее #openModal. Вот так это должно примерно выглядеть и у Вас. Далее, перед закрывающим тегом </body> пишем код, который указан ниже. Учтите, что для оформления мы будем использовать классы,  а для вызова окна id. Следуя из этого правила, мы можем создать бесчисленное множество различных всплывающих окон.

<div id="openModal" class="modalDialog">
   <div>
      <a href="#close" title="Close" class="close">X</a>
      <h2>Всплывающее окно</h2>
      <p>Это окно создано одним из самых простых способов. Ничего личного, все просто :)</p>
   </div>
</div>

Теперь нам нужно красиво все оформить и сделать так, чтобы все работало как нужно. Начнем оформлять.

Оформление

Оформляем нашу ссылку openModal.

.modalDialog {
 position: fixed;
 font-family: Arial, Helvetica, sans-serif;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: rgba(0,0,0,0.8);
 z-index: 99999;
 -webkit-transition: opacity 400ms ease-in;
 -moz-transition: opacity 400ms ease-in;
 transition: opacity 400ms ease-in;
 display: none;
 pointer-events: none;
}

Приведенный выше код прост до безобразия. Но на всякий случай, так как я знаю, что мой блог читает достаточно много новичков разберу возможные сложности. Чтобы окно всегда была на одном месте я ему задал фиксированное положение. Также, чтобы окно растягивалось на весь экран я задал координаты углов в точку 0. Для заднего фона установлен черный цвет и добавлена прозрачность, таким образом достигается затемнение вокруг модального окна. Чтобы окно было по верх остальных элементов страницы, установлен большой z-index. Для плавного появления и исчезновения нашего любимого модального окошка, а оно таким станет, поверьте мне, transition. Чтобы спрятать окно необходимо установить display в none. Свойство pointer-events позволяет контролировать интерактивность (кликабельность) элементов.

Открытие всплывающего окна

Мы сделали оформление нашего окна. Но! Оно же, Вы скажете мне, не работает. Да, отвечаю я, это так. Ибо теперь самое интересное. В CSS3 появился псевдокласс target, поистине полезная штука, что ни говори. И в нашем модальном всплывающем окне без него вообще никак. Что оно делает. Данный псевдокласс, если его указать с каким-то элементом, который определен в адресной строке как id, в нашем случае это #openModal. То, свойства этого псевдокласса станут более важными, чем у целевого элемента. Я думаю, Вы уже поняли, что я хочу сделать.

.modalDialog:target {
 display: block;
 pointer-events: auto;
}

.modalDialog > div {
 width: 400px;
 position: relative;
 margin: 10% auto;
 padding: 5px 20px 13px 20px;
 border-radius: 10px;
 background: #fff;
 background: -moz-linear-gradient(#fff, #999);
 background: -webkit-linear-gradient(#fff, #999);
 background: -o-linear-gradient(#fff, #999);
}

Псевдо-класс target устанавливает DISPLAY в BLOCK и таким образом происходит всплытие окна. Свойство POINTER-EVENTS управляет активностью ссылки.
Свойства DIV устанавливает ширину окна, его положение на экране и отступы для установки окна в центр страницы. Остальные свойства задают поля внутри страницы, скругление углов и фон окна с градиентов от белого до темно-серого.

Закрытие модального окна

Когда задано оформление окна и оно открывается, необходимо сделать кнопку закрытия окна — оформить ее и реализовать функциональность. Использование CSS3 и HTML5 позволяет создавать стильные нестандартные кнопки, не используя при этом изображения:

.close {
 background: #606061;
 color: #FFFFFF;
 line-height: 25px;
 position: absolute;
 right: -12px;
 text-align: center;
 top: -10px;
 width: 24px;
 text-decoration: none;
 font-weight: bold;
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 border-radius: 12px;
 -moz-box-shadow: 1px 1px 3px #000;
 -webkit-box-shadow: 1px 1px 3px #000;
 box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

Для кнопки установлен цветной фон, задана позиция и выравнивание, а также ширина строки. Кнопка круглая благодаря установке свойства border-radius в 12, дополнительно установлена тень от нее.

Для тех, кто ничего не понял (смотрим видео)

Итог

У нас получился отличный pop up. И как видите очень и очень легко. Это всплывающее окно будет работать с любой системой управления, joomla, wordpress или иные. Также этот способ отлично работает во всех браузерах. Думаю, это всплывающее окно станет визитной карточкой Вашего сайта, а простота его конфигурирования дает возможность полностью подогнать дизайн pop up-а под Ваш конкретный сайт. Пользуйтесь.