HTML: Создаем свое PopUp окно

Сегодня мы поговорим о том как создать свое popup окно для своего сайта. Сейчас данный метод очень популярен, однако большинство решений для его реализации являются платными. Пример не очень красивого окна (но это же всего лишь пример) внутри записи…

Любое попап окно по своей сути состоит из двух частей. Первое — затемнение общего фона. Второе — само окно. Окно же в свою очередь как правило разделяется на заголовок, текст и форму подписки. Давайте подготовим базу для нашего окна, учитывая указанную структуру.

<div id='fs_popup_bg'>
 <div id='fs_popup'>
   <div class='fs_popup_head'>
   </div>
   <div class='fs_content'>
     <div class='fs_content_left'>
     </div>
     <div class='fs_content_right'>
     </div>
   </div>
 </div>
</div>

Имеем:
fs_popup_bg — Затемнение сайта;
fs_popup — Само окно;
fs_popup_head — Заголовок окна;
fs_content — Содержимое окна, разделенное на две части;

Теперь пропишем необходимые стили…

<style>
#fs_popup_bg {
    z-index:9999;
    left:0;
    top:0;
    position:fixed;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.9);
  }
  #fs_popup {
    margin:10% 20%;
    z-index:10000;
    position:fixed;
    width:600px;
    border-radius: 25px;
    border: 5px solid #FF0000;
    height:300px;
    background: #000080;  
    padding: 1px 10px 10px 10px; 
  }
  .fs_content_left, .fs_content_right {
    float: left;
    padding: 5px:
    font-size: 20px;
    font-family: Arial;
  }
</style>

Бегло осмотрим стили нашего popup окна.
#fs_popup_bg — говорит о том, что наш фон, будет черным, и почти не прозрачным (0.9), располагаться будет в левом верхнем углу и занимать всю область экрана. При этом глубина элемента, а точнее его возвышение над другими элементами будет очень большая (заведомо больше других).
#fs_popup — говорит о том, что окно будет на уровень выше фона (иначе мы бы его не видели). Размеры его будут 600px на 300px с закругленными углами и красной рамкой.
.fs_content_left, .fs_content_right — говорит нам что блоки прижимаются влево (нужно для их расположения на одном уровне), они имеют отступы и шрифт Arial.

Заполним наше окно содержимым:

<div id='fs_popup_bg'>
 <div id='fs_popup'>
   <div class='fs_popup_head'>
   <a onclick='document.getElementById("fs_popup_bg").style.display = "none";'>Закрыть</a>
   </div>
   <div class='fs_content'>
     <div class='fs_content_left'>
     В данной записи мы научимся делать вот такое вот popup окно. Просто, быстро, эффективно, а главное бесплатно! 
     </div>
     <div class='fs_content_right'>
      Скорей вводи свой E-Mail и получай кучу полезной информации!*
      <br/>
      <br/>
      <center>Ваш E-Mail:</center>
      <input type='text' value='' />
      <br/>
      <input onclick='alert("Спасибо!");' class='fs_ok' type='button' value='Подписаться' />
      <hr/>
      <small>* - Данное поле не активно. Нажимая кнопку "Подписаться" Вы даете свое согласие на использование Вашего адреса для целей массовой рассылки рекламных материалов. А еще Вы завещаете свою машину, квартиру и 10% своего дохода автору сайта.</small> 
     </div>
   </div>
 </div>
</div>

И дополним наши стили, для более красивого отображения:

<style>
  #fs_popup_bg {
    z-index:9999999999998;
    left:0;
    top:0;
    position:fixed;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.9);
  }
  #fs_popup {
    margin:10% 20%;
    z-index:999999999999;
    position:fixed;
    width:600px;
    border-radius: 25px;
    border: 5px solid #FF0000;
    height:300px;
    background: #000080;  
    padding: 1px 10px 10px 10px; 
  }
  .fs_popup_head {
    text-align: right;
  }
  .fs_popup_head a {
    color: #FFF;
    cursor: pointer;
    text-decoration: underline;
  }
  .fs_popup_head a:hover {
    cursor: pointer;
    text-decoration: none;
  }
  .fs_content_left, .fs_content_right {
    float: left;
    padding: 5px:
    font-size: 20px;
    font-family: Arial;
  }
  .fs_content_left {
    width: 370px;
    color: #FFF;
    font-size: 17px;
    line-height: 17px;
    font-family: Arial;
  }
  .fs_content_right {
    width: 200px;
    color: #FFFF00;
  }
  .fs_content_right small {
    font-size: 7px;
    line-height: 7px;
  }
  .fs_content_right input {
    margin: 5px;
    width: 190px;
    color: #000;
  }
  .fs_ok {
    border: 1px solid #FF0000;
    border-radius: 10px;
    height: 35px;
    background: #FFFF00;
    cursor: pointer;
    color: #000;
  }
</style>

Вот принципе и все. Как видно из примера JavaScript для popup окна по сути нужен в двух случаях:
1) Событие закрытие нашего окна;
2) Событие на нажатие на кнопку «Подписаться»;
Так же не помешает проверка, показывалось ли данное окно на данном компьютере. Для этих целей вполне подойдет работа с куками.