Всплывающее окно dialog jquery UI

Рассмотрим на примере, как реализовать всплывающее окно с помощью библиотеки Jquery UI.

Для начала подключим эту библиотеку:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Теперь подключаем скрипт

<script>
$(function() {
    $("#dialog").dialog({
        modal: true,
        zIndex: 3999,
        minWidth: 1180,
        autoOpen: false
    });

    $("#opener").click(function() {
      $("#dialog").dialog( "open" );
    });
});
</script>

Здесь простые параметры:

• zIndex - в CSS свойство zindex
• minWidth - минимальная высота всплывающего окна
• autoOpen - Если "true",то модальное окно появляется при загрузки страницы

Мы рассматриваем, как вызывать модальное окно при клике на какой то объект, к примеру, сейчас на DIV с ID "opener". Создадим его:

<div id="opener">Всплывающее окно</div>

Модальное окно при клике на этот блок появится. Его можно будет перетаскивать, и закрывать по кнопке.

Но хочу предложить вариант следующий. Чтобы при клике в любую область экрана, кроме самого окна, всплывающее окно закрывалось. Для этого изменим немного наш скрипт:

<script>
$(function() {
    $("#dialog").dialog({
        modal: true,
        zIndex: 3999,
        minWidth: 1180,
        autoOpen: false,
        open: function (event, ui) {
            $(".ui-widget-overlay").click(function(){
                $(".ui-dialog-titlebar-close").trigger('click');
            });
        }
    });

    $("#opener").click(function() {
      $("#dialog").dialog( "open" );
    });
});
</script>

Вот так просто и работает всплывающие окна в библиотеки jquery UI. Подробнее ознакомиться с всплывающими окнами можно на официальном сайте. Перейти