Простая всплывающая форма на JQuery с затемнением.
При нажатии на кнопку, появляется всплывающая форма с полупрозрачным фоном под ней. Форму можно закрыть кликнув на крестик в правом верхнем углу, либо нажав на полупрозрачный фон в любом месте.
<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(); }); });
Ниже показана работа данной формы.
Комментарии
good article on building up new website.