Описание тега simplemodal
Обзор
SimpleModal - это легкий плагин jQuery, который предоставляет мощный интерфейс для разработки модальных диалогов. Думайте об этом как о модальной диалоговой структуре. SimpleModal дает вам гибкость для создания всего, что вы можете себе представить, при этом защищая вас от связанных кросс-браузерных проблем, присущих разработке пользовательского интерфейса.
Применение
SimpleModal предоставляет два простых способа вызвать модальный диалог.
В качестве связанной функции jQuery вы можете вызвать modal()
в элементе jQuery, и модальное диалоговое окно будет отображаться с использованием содержимого этого элемента. Например:
$("#element-id").modal();
Как автономная функция модальный диалог может быть создан путем передачи объекта jQuery, элемента DOM или простой строки (которая может содержать HTML). Например:
$.modal("<div><h1>SimpleModal</h1></div>");
Оба метода, описанные выше, также принимают необязательный объект параметров (хорошая скороговорка, да?). Используя приведенные выше примеры:
$("#element-id").modal({options});
$.modal("<div><h1>SimpleModal</h1></div>", {options});
Поскольку SimpleModal - это скорее модальная структура диалоговых окон, оба приведенных выше примера создают очень простые модальные диалоги без стиля. Стилизация может быть выполнена с помощью внешнего CSS или свойств в объекте параметров. См. Раздел "Параметры" ниже для получения подробного списка доступных параметров.
Стиль
Стили можно применять через внешний CSS, объект параметров или и то, и другое. Параметры CSS для модального наложения, контейнера и элементов данных:overlayCss
, containerCss
а также dataCss
, все они принимают объект типа "ключ-значение" свойств. Подробности см. В документации jQuery CSS.
SimpleModal обрабатывает установку необходимого CSS для отображения модального диалога. Кроме того, SimpleModal динамически центрирует модальный диалог, еслиposition
используется опция, имеющая приоритет.
SimpleModal внутренне определяет следующие классы CSS: simplemodal-overlay
, simplemodal-container
, simplemodal-wrap
(SimpleModal автоматически установит overflow
автоматически, если содержимое становится больше контейнера), и simplemodal-data
.
Примечание. Параметр closeHTML по умолчанию для SimpleModal объявляет
modalCloseImg
класс, чтобы отобразить изображение для закрытия диалога. Загрузите изображение. Поскольку он определен в параметре, его нельзя стилизовать с помощью параметров - требуется внешнее определение CSS:#simplemodal-container a.modalCloseImg { background:url(/img/x.png) no-repeat; /* Adjust URL as required */ width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-18px; cursor:pointer; }
Для Internet Explorer 6 вы можете применить исправление PNG:
<!--[if lt IE 7]>
<style type='text/css'>
#simplemodal-container a.modalCloseImg {
background:none;
right:-14px;
width:22px;
height:26px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='img/x.png', sizingMethod='scale'
);
}
</style>
<![endif]-->
Демо
В дополнение к приведенным ниже примерам у меня есть коллекция демонстраций, в которых представлены различные возможности SimpleModal:
Посмотреть демонстрации
Скачать
SimpleModal размещен на Google Code:
Скачать SimpleModal
Доступны две версии; полная исходная версия, содержащая комментарии и отформатированная для удобства чтения, и уменьшенная версия с удаленными комментариями и форматированием. Полная версия рекомендуется для изучения и тестирования, миниатюрная версия предназначена для производственного использования.
Архивы
Предыдущая версия SimpleModal документации: v1.2.x, v1.1.x, v1.0.x.