Данные плагина:

• название: blockUI v2
• размер: 15,6 кб без сжатия
• сайт плагина, скачать, демо

На сайте разработчика он выглядит так:

Для себя я подобрал определенные настройки, которые делают окна красивее. Во-первых, я хотел, чтобы модальное окно располагалось по центру экрана, а по умолчанию оно находится чуть левее. Во-вторых, я хотел сделать его похожим на модальные окна и дилалоги в Windows.

$.blockUI.defaults.css.border = '0px'; //убираем серую границу
$.blockUI.defaults.fadeIn = 100;  //ускоряем появление
$.blockUI.defaults.fadeOut = 100; //и исчезновение
$.blockUI.defaults.css.left = '40%'; //окно будет в центре

Этот код нужно вставить в страницу после подключения плагина. Параметр left:40% зависит от ширины окна, в моем случае оно 275 пикселей.

Что же сделать, чтобы окно выглядело как в Windows? Я конечно не мастер верстки, но результат мне вполне подходит. Сначала делаем макет окна и даем ему стили.

<div id="modal_dialog" style="display:none; cursor: default" class="dialog">
  <div class="dialog_title_bar">
    <div class="dialog_caption">www.charnad.com</div>
    <div class="rotes_kreuz"></div>
  </div>
   <div class="dialog_pane">
    <div>Наше модальное окошко</div>
    <div style="margin-top: 10px;">
     <form action="" method="POST">
       <input type="button" id="yes" value="Да" class="dialog_button"/>
       <input type="button" id="no" value="Нет" class="close_dialog dialog_button" />
     </form>
    </div>
 </div>
</div>

Почему display: none? Потому что плагин автоматически переключит видимость. Теперь CSS:

.dialog {
    cursor: default;
    border: 1px solid #000000;
}
 
.dialog form {
    margin: 0px;
}
 
/* Контейнер с заголовком */
.dialog .dialog_title_bar {
    height: 17px;
    padding: 1px;
    background-image: url(dialog-caption-bg.png) ;
}
 
/* Стиль текста заголовка */
.dialog .dialog_title_bar .dialog_caption {
    color: black;
    font-family: sans-serif;
    font-size: 9pt;
    text-align: left;
    padding-left: 5px;
    padding-top: 1px;
}
 
/* Панель диалога */
.dialog .dialog_pane {
    background: buttonface;
    text-align: center;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 10px;
    padding-bottom: 10px;
}
 
/* Кнопки диалога */
.dialog .dialog_button {
    width: 80px;
    height: 25px;
}
 
/* Красный крест, закрывающий окно */
.dialog .rotes_kreuz {
    background-image: url(rotes_kreuz.png);
    width: 28px;
    height: 15px;
    position: absolute;
    right: 3px;
    top: 3px;
    float: right;
    display: block;
    cursor: pointer;
}

Пути к картинкам, конечно же, поставьте свои. Сами картинки можно взять: фон заголовка, крест.

Теперь Javascript, чтобы все у нас прыгало и бегало.

$(document).ready(function() {
    //По этим кнопкам модальное окно закрывается
    $('.rotes_kreuz, .close_dialog').click(function() {
        $.unblockUI();
        return false;
    });
 
    //Эта кнопка будет вызывать наше окно
    $('#show_modal').click(function() {
        $.blockUI({message: $('#modal_dialog'), css: {width: '275px'}});
    });
 
    //По кнопке "Да" будет отправляться форма 
    $('#modal_dialog #yes').click(function() {
        $('#modal_dialog form').submit();
    });
});

Можно скачать:[filebase:file:file=3:tpl=simple] или посмотреть прямо здесь.

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

Fail #1

Первое, что мы видим - отсутствие обратной совместимости =(.  То есть, если в старые проекты мы скопируем новую библиотеку, то начнутся проблемы. Во-первых мы не увидим наши стили. Эрик переименовал дефолтные id у элементов. Теперь id оверлея у нас 'simplemodal-overlay', id контейнера - 'simplemodal-container', а кнопки 'simplemodal-close'. С одной стороны хорошо, приводится в порядок список id, не будет путаницы с другими плагинами для модальных окон, с другой сейчас начинаются проблемы у тех, кто не разобрался как обновить старые скрипты. На сайте, автор приводит способ, как обеспечить совместимость со старыми css:

$.extend($.modal.defaults, {
  closeClass: "modalClose",
  overlayId: "modalOverlay",
  containerId: "modalContainer"
});

Ладно, будем считать разобрались, настроили стили. Запускаем самый простенький тест, взятый из моего прошлого поста про SimpleModal и...

Fail #2

Бум! Нажал на кнопочку ОК и получил дырку в оверлее. Тут надо заметить, что я убрал вспомогательный <div>, который использовал в первый раз. По-видимому без него все-таки не обойтись. В итоге <div> вернул, дырок больше не получаю. Надо заметить, что подобным страдает только Опера (у меня 9.63). Firefox 3, Chrome 1.0.154 и IE7 показали себя с лучшей стороны. Насколько я понял, автор пытался решить эту проблему для Оперы, но по-видимому в 9.63 что-то изменилось и его старания оказались напрасны.

Success #1

А вот и первая удача в новой версии. Теперь нам не надо приклеивать плагин Dimensions. Окно позиционируется по центру совершенно самостоятельно. Это очень радует, я пробовал играть с размерами окна и оно всегда было по центру. Одно только замечание. Нельзя давать модальному окну быть больше, чем размер окна браузера. Или хотя бы кнопку для закрытия не уносить. А то сделал я окно высотой в 1000 пикселей, а экран на ноутбуке у меня 800 пикселей высотой. Вот вам и задача, как закрыть модальное окно? В опере я спасаюсь табом, чтобы перейти на кнопку OK, которая присутствует в моих диалоговых окнах и проблел или enter, чтобы закрыть. Не каждый догадается на самом деле.

Итого что мы имеем

Помимо всего вышеуказанного, в версии 1.2.2 есть еще изменения(ченджлог). Их я проверить не могу. О результатах тестирования Эрику написал, надеюсь он сможет решить проблему с Оперой. Позже я возможно напишу апдейт для своих диалоговых окошек. А здесь все.

Начинаем использовать

Данные плагина:

• название: simplemodal
• размер: 10кб без сжатия
• автор: Eric Martin
• сайт: http://www.ericmmartin.com/projects/simplemodal/
• скачать: http://simplemodal.googlecode.com/files/jquery.simplemodal-1.1.1.js
• демо: http://www.ericmmartin.com/simplemodal-test/

Выглядит это дело вот так:

Вот так выглядит плагин на сайте разработчика

Для того чтобы плагин заработал его надо подключить:

<script src="jquery.simplemodal.js" type="text/javascript"></script>

А так же указать стили для овереля (серой области), контейнера (собственно окно) и кнопки закрыть.

#modalOverlay { 
  background-color:#000;  /* Тут выбираем цвет затемнения */ 
  cursor:wait;  /* Курсор при наведении на затемненную область */ 
  filter: alpha(opacity=80); /* Интенсивность затемнения */ 
  height: 100%; 
} 
 
#modalContainer { 
  height:auto;   /* Для растягивания по высоте */ 
  width:300px; 
  left:50%;  /*в купе с margin-left, которая равна минус половине ширины центруют по горизонтали*/ 
  top:50%;   /*центрует по вертикали, вместе с margin-top, если задать высоту*/ 
  margin-left:-150px; 
  /* margin-top: -70px; */ 
  background-color:#fff; 
  border:3px solid #ccc; 
  padding: 10px; 
}  
a.modalCloseImg { 
  background:url(x.png) no-repeat; 
  width:25px;  /* Положение отличается от тех, что в примере. Мне кажется так удобнее */
  height:29px; 
  display:inline; 
  z-index:3200; 
  position:absolute; 
  top:0px; 
  right:0px; 
  cursor:pointer; 
}

К сожалению в плагине таятся некоторые глюки. Так например в опере, если контент страницы короче чем сама страница, то при закрытии окна внизу остается серая область. А в IE она иногда и вовсе не закрашивается.

Вот так это выглядит в Опере

Однако это решается довольно просто. На страницу необходимо добавить стиль

#helper { 
  position: absolute; 
  top: 0px; 
  left: 0px; 
  width: 100%; 
  height: 100%; 
  z-index: -10; 
}

И в любом месте страницы вставляем:

<div id="helper"></div>

Этим мы добиваемся перерисовки браузером нашего документа при закрытии модального окна.

Делаем удобное оповещение

Сначала добьемся, чтобы окно было посередине страницы. В своем примере я ограничил ширину 300px, а вот высота может меняться. CSS свойство top:50% действительно опускает окно до середины страницы, однако само модальное окно идет как раз ниже середины. Если бы мы указали высоту в пикселях, например 150px, то могли бы поднять окно над центром с помощью margin-top: -75px. Но окно будет резиновым, а мы для этого воспользуемся еще одним плагином: Dimensions. Данные плагина:

• название: Dimensions
• размер: 3кб без сжатия
• сайт: http://docs.jquery.com/Plugins/dimensions
• скачать: http://plugins.jquery.com/files/dimensions_1.2.zip
• демо: http://brandonaaron.net/docs/dimensions/#code-samples

Этот плагин дает нам возможность измерить высоту окна, соответственно и вычислить половину высоты и поднять на это количество пикселей окно над центром веб-страницы.

<script type="text/javascript" src="jquery.dimensions.js"></script>

Подключили. Теперь открываем редактором файл плагина Simplemodal (jquery.simplemodal.js), да-да, будем исправлять плагин. Если наши версии совпадают, то на строке 294 будет функция open. Идем в самый ее конец, сразу после this.bindEvents(); и до закрывающей фигурной скобки ставим

$('#modalContainer').css('margin-top',-$('#modalContainer').outerHeight()/2-50);

Я специально отнял от высоты еще 50 пикселей, мне кажется это добавляет удобства. Но вы можете поэкспериментировать. Осталось совсем немного. Добавляем где-нибудь в конце страницы

<div id="message" style="display: none; text-align: center;">
<div id="messageText">текст модального окна</div><br /><br />
<input type='button' value='Ok' class='modalClose' style='height: 30px; width: 60px;'/>
</div>

Заметьте, кнопка имеет class='modalClose'. Вы можете создать в диве любой другой объект с этим классом - клик по нему будет закрывать окно. Все, приготовления закончены. Осталось его только использовать. Например так:

$(document).ready( function() {
    $('#messageText').html('Это наше окошко!');
    $('#message').modal();
});

И при загрузке страницы увидим

Наше модальное окно!

Ура, у нас все получилось.

Демо: посмотреть

А другие jQuery примеры можете посмотреть у моего друга Snowcore.

Начнем уже.

Для того, чтобы наш плагин мог быть вызван, как объект jQuery надо объявить его следующим образом:

jQuery.fn.validForm = function(userOptions) {
    //пишем код тут
}

userOptions - в данном случае пользовательские опции. А настраивать пользователь сможет контейнер для вывода сообщения о том, что не все поля были заполнены правильно и стиль этого контейнера.

var options = {
    errorContainer: "#errorList"
}

После чего переписываем эти опции пользовательскими.

$.extend(options, userOptions);

Добавляем так же стиль для оформления полей ввода, в которых есть ошибки (красная обводка в 2 пикселя и светло-красный фон). Добавляем методом append в тег <head>

$('head').append("<style>.inputError{border: 2px solid #F00; background: #FAA;}</style>");

Вот так это будет выглядеть

Теперь у нас заданы основные настройки, пора переходить к активным действиям. В jQuery программист оперирует не столько отдельными элементами, сколько их коллекциями, поэтому мы должны учитывать, что в наш плагин может быть передана не одна форма для валидации, а несколько. Для этого воспользуемся функцией each для перебора всех входных данных. Данные у нас помещаются в переменной $(this).

$(this).each( function() {
    var id = "#" + $(this).attr('id');
    if ($(id + " input").length > 0) {
        Validate(id);
    } else {
        return false;
    }
});

Как видите, для каждого полученного объекта мы объявили переменную id, состоящую из '#' и атрибута 'id' объекта. Тем самым мы получили id, который для использования в других функциях jQuery. В третьей строчке мы берем объект с именем id и всех его потомков, являющимися input'ами, и если их не 0, то применяем функцию Validate, которую опишем позже, а иначе возвращаем false.  (Если вам что-то непонятно в этой записи - прочитайте самый первый материал, указанный в статье.) Суть всей предыдущего куска кода - применить функцию Validatе ко всем переданным в плагин формам, у которых есть поля ввода. Далее идет собственно функция, так сказать "сердце" этого плагина.

function Validate(form) {
    //дальше пишем код тут
}

form - имя формы, которую будем проверять.

$(form + " input[@type=submit]").click(function() {});

Объявляем обработчик нажатия на кнопку submit. Внутри нее сначала объявляем счетчик ошибок:

var errorAmount = 0;

А затем и коллекцию элементов, которые будем проверять.

var collection = $(form + " input[@type=text]")
    .add(form +" input[@type=password]")
    .add(form +" input[@type=file]")
    .add(form +" textarea")
    .add(form +" select");

Функция add добавляет к уже найденным элементам еще множество. Таким образом, в переменной collection у нас собраны все поля ввода текста, пароля, селекты и текстарии. Для каждого элемента коллекции сначала для простоты определяем элемент в переменную element, его длину length. Если длина у нас false (то есть равна 0) мы добавляем css-класс этому элементу (этот класс мы выше добавили в <head>), увеличиваем счетчик ошибок на 1. В случае же правильного заполнения поля - убираем красную обводку для поля ввода.

collection.each(function() {
var element = $(this);
var length = $.trim(element.attr('value'));
 
if (!length) {
    element.addClass('inputError');
    errorAmount++;
} else {
    element.removeClass('inputError');
}
});

Для большего комфорта мы добавим обработчики изменения в наши поля. Если пользователь нажимает клавишу (то есть начинает вводить текст) мы сразу убираем обводку, однако если он стер, все, что ввел - возвращаем ее назад.

collection.keypress( function (){
    $(this).removeClass('inputError');
});
 
collection.change( function() {
    if (($(this).attr('value')).length < 1) {
        $(this).addClass('inputError');
    } else {
        $(this).removeClass('inputError');
    }
});

Теперь у нас есть количество ошибок в форме, а все поля с ошибками выделены красным. Осталось вывести сообщение пользователю о том, что он забыл ввести что-либо.

if (errorAmount) {
    $(options.errorContainer).html('Заполните пожалуйста правильно выделенные поля');
    $(options.errorContainer).show();
    return false;
} else {
    $(options.errorContainer).hide();
}

Заполняем указанный в опциях контейнер текстом и показываем. А если все заполнено правильно - скрываем. Вот собственно и все. Просто и полезно.

Теперь о том, как это можно использовать.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validform.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#myForm').validForm({errorContainer: '#errors'});
  });
</script>

Не забудьте вставить в код контейнер с id="errors".

Готовый код можно скачать тут.
А рабочий пример посмотреть тут.