Обзор плагина SimpleModal, его глюков, избавление от глючности, позиционирование по центру экрана и прочие удобства. Помимо этой статьи советую посмотреть на более новую "Модальные окна на jQuery blockUI"
Начинаем использовать
Данные плагина:
- название: simplemodal
- размер: 10кб без сжатия
- автор:
- сайт:
- скачать:
- демо:
Выглядит это дело вот так:
Вот так выглядит плагин на сайте разработчика
Для того чтобы плагин заработал его надо подключить:
<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кб без сжатия
- сайт:
- скачать:
- демо:
Этот плагин дает нам возможность измерить высоту окна, соответственно и вычислить половину высоты и поднять на это количество пикселей окно над центром веб-страницы.
<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(); });
И при загрузке страницы увидим
Наше модальное окно!
Ура, у нас все получилось.
Демо:
А другие можете посмотреть у моего друга Snowcore.
А еще я писал про:
Декабрь 1st, 2008 at 12:05
Добрый день! Посмотрела Вашу статью о модальных окнах, скачала. Окна очень удобные, информацию собирют и передают. Все хорошо, только проблема с кодировкой. Если выставляю в индексе charset=windows-1251, то русская кодировка видна только в полях ввода и в ответных сообщениях. На mail все приходит как надо, не кривое. Но первое окно ни как не хочет выводить русскую кодировку ( Введите имя). Если ставлю utf вообще одни ромбики. Не подскажите, что делать?
Декабрь 1st, 2008 at 17:29
Здравствуйте, Елена. Трудно судить не видя кода. Могу предположить, что у вас файлы в разной кодировке. У меня в примере кодировка стоит utf-8. Если вы пишете на php, после чего выводите в модальное окно попробуйте iconv(‘cp1251′, ‘utf-8′, $str);
Апрель 25th, 2009 at 09:09
Очень полезная вещь:)Давно искала,видела такую фишку на других сайтах,а как называется не знала.СПАСИБО ОГРОМНОЕ!
P.S Классный у вас блог,не только по содержанию,но и по оформлению:)
Май 2nd, 2009 at 13:54
тоже проблема с кодировкой! вот страница
код полностью оригинальный с
только кодировка страницы поставлена charset=windows-1251.
и всё равно вместо руских букв – ромбики.
(кликаем на демо – там вместо ромбиков должно быть написанно *Ваше имя).
Хэлп плиз!
Май 2nd, 2009 at 19:23
во-первых советую ставить UTF-8, во-вторых, проверьте в каком формате у вас сохранен файл (ANSI, UTF8), в-третьих не делаете ли вы случаем iconv при выводе?
Май 3rd, 2009 at 02:19
Ух ты! CharnaD спасибо за такую быструю реакцию.
iconv при выводе не делал.
проблему решил вставкой header(«Content-type: text/html; charset=windows-1251″);
Май 3rd, 2009 at 16:14
Всегда пожалуйста. Я за блогом слежу, если что – спрашивайте.
Май 5th, 2009 at 22:09
Я использую для вывода модального окна другую библиотеку, ModalBox. На сайте *****.net, в разделе «Мои пакеты», выводится такое окно при нажатии кнопок «Купить» или «Продлить». Вопрос: где обычно задается размещение модального окна (мне нужно, чтобы оно появлялось по центру, а не вылазило сверху). Это css или же какой параметр?
Май 5th, 2009 at 23:27
В simplemodal встроена центровка по вертикали по-моему. Можно и через css, можно и жестко задать
Май 10th, 2009 at 21:38
А чем н еподходят стандартные окна которы епредланают исопльзовать в jQuery
Май 10th, 2009 at 23:32
Они более сложные) А это «простое» окно)
Сентябрь 10th, 2009 at 00:28
Добрый вечер всем. У кого есть исходник HTML кода. Ато я что то не пойму почему приписанный скрипт не работает. Толи я что то не верно пишу код, то ли скрипт не рабочий.. Большое спасибо за помощь…
Октябрь 9th, 2009 at 13:21
На jqModal сделать имхо проще. Тем более библиотечка пуру килобайт занимает.
Октябрь 9th, 2009 at 13:22
Спасибо, посмотрю.
Декабрь 3rd, 2009 at 12:27
хотелось бы увидеть тут исходники приложения
Декабрь 22nd, 2009 at 23:46
Скажите пожалуйста у меня есть выпадающее меню, я нажимаю на заголовок h2 b у меня внизу выпадает список, мне надо чтобы он закрывался когда я кликну на любом месте страницы.
код jquery у меня такой
jQuery(document).ready(function($) {
jQuery(“li.widget_archive h2″).click(function () {
jQuery(“li.widget_archive ul”).slideToggle(“normal”);
});
jQuery(“li.widget_categories h2″).click(function () {
jQuery(“li.widget_categories ul”).slideToggle(“normal”);
});
jQuery(“li.widget_links h2″).click(function () {
jQuery(“li.widget_links ul”).slideToggle(“normal”);
});
});