Рейтинг: 0 / 5
Рассмотрим создание всплывающего окна с использованием возможностей библиотеки 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, окно при загрузке страницы сразу появляться не будет.
