Простое модальное окно [jquery, css]
![Простое модальное окно [jquery, css]](http://makexhtml.ru/wp-content/uploads/2011/12/modal_window.gif)
Сделал простое модальное окно. Осваиваю jquery потихоньку. Есть баги в IE6, IE7.
В функционале есть возможность центрирования окна, закрытия при нажатии клавиши escape, закрытие при нажатии на затемнение.
Итак, первым делом что стоит сделать это подключить jquery
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
Далее подключаем файл плагина
<script type="text/javascript" src="path_to_file/mdss_modal_window.js"></script>
Если необходимо подключаем центрирование окна. Если не надо, то ничего не прописываем
<script type="text/javascript">
$(function() {
$('.modal').center();
});
</script>
Затем прописываем стили для окна
<style type="text/css">
.modal {
position:absolute;
top:20px;
left:10px;
width:640px;
background:#fff;
padding:10px;
border-radius:10px;
display:none;
box-shadow:0 0 40px #ddd;
}
</style>
Название класса может быть любое.
Теперь в верстке прописываем ссылку на открытие окна
<a href="#example_1" name="modal">Открываем окошко example 1</a>
Обязательно прописываем name=”modal” для инициализации плагина. Id example_1 должен соответствовать id появляющегося блока.
Далее вставляем в верстку блок который должен всплывать
<div id="example_1" class="modal">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
На этом все. Остается только стилизовать. Конечный код плагина ниже
$(function() {
$.fn.extend({
center: function () {
return this.each(function() {
var $this = $(this);
var $window = $(window);
clearTimeout($this.timerHandle);
var top = ($window.height() - $this.height())/2+$window.scrollTop();
var left = ($window.width() - $this.width())/2+$window.scrollLeft();
clearTimeout(this.timerHandle);
this.timerHandle = setTimeout(function () {
$this.animate({
"top": top,
"left": left
}, 300);
$(window).bind('scroll', function() {
$($this).center();
});
$(window).bind('resize', function() {
$($this).center();
});
}, 200);
});
}
});
var overlayHeight = $(document).height();
var overlayWidth = $(window).width();
$('body').prepend('<div id="mask"></div>');
$('#mask').css({'position':'absolute','top':'0','left':'0', 'background':'#000', 'cursor':'pointer', 'z-index':'999', 'display':'none'});
$(window).bind('resize', function() {
$('#mask').css({'width':($(document).width()), 'height':($(document).height())});
});
$('a[name=modal]').click(function(e) {
e.preventDefault();
var id = $(this).attr('href');
$('#mask').css({'width':overlayWidth,'height':overlayHeight});
$('#mask').fadeTo("slow",0.7);
$(id).css({'z-index':'1000', 'position':'absolute', 'display':'none'});
$(id).fadeIn(500);
$(document).keyup(function(d) {
if (d.keyCode == 27) {
$('#mask').fadeOut();
$(id).fadeOut();
}
});
$('#mask').click(function () {
$(this).fadeOut();
$(id).fadeOut();
});
});
});
Демо / Скачать
Tweet


Комментарии
А что пиз***то, так это то, что совместимо с motools билиотекой
@Mons:
даже не было мысли проверять еще с mootools работоспособность