JQuery. Всплывающая форма.

Главная > JQuery. Всплывающая форма.

Простая всплывающая форма на JQuery с затемнением.

Принцип работы.

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

HTML разметка

<button>Открыть окно</button>
 
<div class="modal-shadow"></div>
<div class="modal-window">
  <div class="close">X</div>
    Текстовое наполнение всплывающего окна.
</div>

Стили

button{
  position:absolute;
  top:50px;
  left:50%;
  margin-left:-60px;
}
.modal-shadow{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:#000;
  opacity:0.5;
  display:none;
}
.modal-window{
  position:absolute;
  top:50%;
  left:50%;
  margin:-100px 0 0 -200px;
  width:340px;
  height:140px;
  padding:30px;
  border-radius:10px;
  display:none;
  background:#fff;
}
.close{
  position:absolute;
  top:5px;
  right:5px;
  width:20px;
  height:20px;
  border-radius:3px;
  cursor:pointer;
  text-align:center;
  color:#fff;
  font:normal 14px/20px Arial, Helvetica, sans-serif;
  background:#555;
}

Скрипт

$(function(){
    $('button').click(function () {
      $('.modal-shadow').show();
    $('.modal-window').show();
    });
 
    $('.modal-shadow').click(function () {
      $('.modal-shadow').hide();
    $('.modal-window').hide();
    });
 
    $('.close').click(function () {
      $('.modal-shadow').hide();
    $('.modal-window').hide();
    });
});

Ниже показана работа данной формы.

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

JComments