Описание тега 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.

Источник