Рейтинг:  0 / 5

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 

   Рассмотрим создание всплывающего окна с использованием возможностей библиотеки jQuery UI. Это одна из популярных библиотек, которые используются для создания интерактивных веб-страниц.

   Подключаем библиотеку:

<link rel="stylesheet" href="/ ссылка на лежащий на сайте code.jquery.com файл стиля">

<script src="/Ссылка на библиотеку jQuery UI на сайте code.jquery.com"></script>

 

   Пишем скрипт

<script>

$(function() {

    $("#okno").dialog({

        modal: true,

        zIndex: 999,

        minWidth: 1000,

        autoOpen: false,

        open: function (event, ui) {

            $(".ui-widget-overlay").click(function(){

                $(".ui-dialog-titlebar-close").trigger('click');

            });

        }

    });

 

    $("#button").click(function() {

      $("#okno").dialog( "open" );

    });

});

</script>

 

   Наше окно будет появляться при клике на некий объект

<div id="button">Кнопка для открытия окна</div>

 

   При клике по свободной области экрана окно будет закрываться. Т.к. для autoOpen установлено значение false, окно при загрузке страницы сразу появляться не будет.

Хотите, перезвоним вам за 35 секунд?
ЗАКАЗАТЬ ЗВОНОК
Хотите, перезвоним вам за 35 секунд?
Это абсолютно бесплатно!