Создание модальной панели с помощью jQuery

Question

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

Есть ли какая-нибудь хорошая простая библиотека для этого, такая как диалог jQuery UI? Я хотел бы использовать пользовательский интерфейс jQuery, но в их модальных диалоговых окнах есть строка заголовка с кнопкой закрытия, которую я не могу легко удалить.

В идеале панель появляется рядом с курсором мыши (соответственно перемещается, если слишком близко к границе браузера).

Answer 1

Вы также можете удалить строку заголовка диалогового окна пользовательского интерфейса JQuery (или только кнопку закрытия) несколькими CSS:

/* Create dialogs without close button */
.ui-dialog-no-close-button .ui-dialog-titlebar-close {
    display: none;
}

/* Create dialogs without title bar */
.ui-dialog-no-titlebar .ui-dialog-titlebar {
    display: none;
}

Затем добавьте его в свойство dialogClass:

$("#dialogdiv").dialog({
    ...
    dialogClass: "ui-dialog-no-close-button",
    ...
});

Answer 2

Вы смотрели на SimpleModal ?

Есть несколько демонстраций , которые вы можете скачать, чтобы использовать в качестве базы или для обучения. Вы также можете скачать библиотеку прямо в коде Google.

Все, что вам нужно сделать, это включить файл JS, установить некоторые стили по умолчанию (CSS или как опции) и все готово:

$('#some-element').modal();

Вы можете указать следующие параметры:

$('#some-element').modal({options});

Answer 3

Мне действительно нравится оверлейный диалог из JQuery Tools. У него есть опция маски за диалоговым окном, демо здесь .