Это то, чем я пользуюсь сам; это выглядит красиво, код прост и легок для понимания и использует минимальные CSS и jQuery.
Вот код (и скрипка, чтобы увидеть его в действии: http://jsfiddle.net/cadkJ/125/):
HTML
<h1>Bacon ipsum dolor sit amet</h1>
<p>Magna adipisicing eu, pig ex pariatur non biltong nisi consequat do exercitation. Biltong exercitation consequat aute. Excepteur velit ribeye, et salami pariatur sed consequat enim ham. Tenderloin consequat et, in pastrami aute meatloaf beef spare ribs tri-tip beef ribs sed ut jerky strip steak. Fugiat turkey shank frankfurter pork loin pastrami.</p>
<button id="modal-launcher">Launch Modal Window</button>
<div id="modal-background"></div>
<div id="modal-content">
<button id="modal-close">Close Modal Window</button>
</div>
CSS
#modal-background {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: .50;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);
z-index: 1000;
}
#modal-content {
background-color: white;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0 0 20px 0 #222;
-webkit-box-shadow: 0 0 20px 0 #222;
-moz-box-shadow: 0 0 20px 0 #222;
display: none;
height: 240px;
left: 50%;
margin: -120px 0 0 -160px;
padding: 10px;
position: fixed;
top: 50%;
width: 320px;
z-index: 1000;
}
#modal-background.active, #modal-content.active {
display: block;
}
JQuery
$(function(){
$("#modal-launcher, #modal-background, #modal-close").click(function() {
$("#modal-content, #modal-background").toggleClass("active");
});
});
Хотите заблокировать прокрутку?
Добавьте следующее правило CSS:
body.active { position: fixed; overflow: hidden; }
Заменить функцию jQuery на: (body добавлено в строку 3)
$(function(){
$("#modal-launcher, #modal-background, #modal-close").click(function() {
$("body, #modal-content, #modal-background").toggleClass("active");
});
});
Хотите ли вы, чтобы события клика на фоне не закрывали модал?
Заменить функцию jQuery на: (#modal-background удалено из строки 2)
$(function(){
$("#modal-launcher, #modal-close").click(function() {
$("#modal-content, #modal-background").toggleClass("active");
});
});