Модальные окна

Создавайте модальные окна с различными стилями и переходами.

Как использовать модальные окна

Практика Простая инструкция по интеграции разметки модальных окон в шаблон Joomla 3 с применением RSForm.

Модальное окно состоит из оверлея, диалога и дополнительной кнопки закрытия. Вы можете использовать любой элемент для вызова модального окна. Чтобы включить JavaScript, добавьте атрибут uk-toggle. Элемент <a> должен быть связан с ID модального окна. Если вы хотите использовать для вызова другой элемент, например, button, задайте ему атрибут uk-toggle="target: #ID" для установки связи с контейнером модального окна по ID.

Добавьте атрибут uk-modal к элементу <div> для создания контейнера и добавления оверлея, который скрывает страницу при отображении модального окна. Для корректной работоспособности необходимо добавить id к контейнеру модального окна. Используйте следующие классы для определения модальных секций:

Класс Описание
.uk-modal-dialog Добавьте этот класс к дочернему элементу <div> для создания диалогового окна.
.uk-modal-body Добавьте этот класс для создания отступов между модальным окном и его содержимым.
.uk-modal-title Добавьте этот класс к элементу заголовка модаьного окна.
.uk-modal-close Добавьте этот класс к элементу <a> или <button> для создания кнопки закрытия. 
<!-- Кнопка вызова модального окна -->
<button uk-toggle="target: #my-id" type="button"></button>

<!-- Модальное окно -->
<div id="my-id" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title"></h2>
        <button class="uk-modal-close" type="button"></button>
    </div>
</div>
  • Открыть 
  • <!-- Кнопка вызова модального окна -->
<button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #modal-example">Открыть</button>

<!--Ссылка вызова модального окна -->
<a href="#modal-example" uk-toggle>Открыть</a>

<!-- Модальное окно -->
<div id="modal-example" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">Заголовок</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p class="uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Закрыть</button>
            <button class="uk-button uk-button-primary" type="button">Сохранить</button>
        </p>
    </div>
</div>

Кнопка закрытия

Чтобы создать кнопку закрытия, включить ее функциональность и добавить надлежащие стили и расположение, добавьте класс .uk-modal-close-default к элементу <a> или <button>. Чтобы разместить кнопку закрытия за пределами модального окна, добавьте класс .uk-modal-close-outside.

Добавьте атрибут uk-close из компонента Close для вставки иконки-крестика.

<div id="my-id">
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-default" type="button" uk-close></button>
    </div>
</div>

<div id="my-id">
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-outside" type="button" uk-close></button>
    </div>
</div>

  • <!-- Это кнопка вызова модального режима с кнопкой закрытия по умолчанию -->
<button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #modal-close-default">Кнопка</button>

<!-- Это модальное окно с кнопкой закрытия по умолчанию -->
<div id="modal-close-default" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <h2 class="uk-modal-title">Заголовок</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

<!-- Это кнопка вызова модального окна с внешней кнопкой закрытия -->
<button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #modal-close-outside">Снаружи</button>

<!-- Это модальное окно с внешней кнопкой закрытия -->
<div id="modal-close-outside" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-outside" type="button" uk-close></button>
        <h2 class="uk-modal-title">Снаружи</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Режим центрирования

Чтобы задать вертикальное центрирование модального окна, используйте класс .uk-margin-auto-vertical из компонента Margin.

<div id="my-id" class="uk-flex-top" uk-modal>
    <div class="uk-modal-dialog uk-margin-auto-vertical"></div>
</div>
  • Открыть 
  • <a class="uk-button uk-button-default" href="#modal-center" uk-toggle>Открыть</a>

<div id="modal-center" class="uk-flex-top" uk-modal>
    <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">

        <button class="uk-modal-close-default" type="button" uk-close></button>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>
</div>

Внимание Класс .uk-flex-top в модальном контейнере нужен для поддержки IE 11.

Шапка и подвал модального окна

Чтобы разделить модальное пространство на разные разделы контента, используйте следующие классы.

Класс Описание
.uk-modal-header Добавьте этот класс к элементу <div> для создания шапки модального окна.
.uk-modal-footer Добавьте этот класс к элементу <div> для создания подвала модального окна. 
<div id="my-id" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div class="uk-modal-header">
            <h2 class="uk-modal-title"></h2>
        </div>
        <div class="uk-modal-body"></div>
        <div class="uk-modal-footer"></div>
    </div>
</div>
  • Открыть 
  • <a class="uk-button uk-button-default" href="#modal-sections" uk-toggle>Открыть</a>

<div id="modal-sections" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div class="uk-modal-header">
            <h2 class="uk-modal-title">Заголовок</h2>
        </div>
        <div class="uk-modal-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="uk-modal-footer uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Закрыть</button>
            <button class="uk-button uk-button-primary" type="button">Сохранить</button>
        </div>
    </div>
</div>
Модификаторы контейнера

Добавьте класс .uk-modal-container, чтобы расширить модальный диалог по умолчанию, как в компоненте Контейнер.

<div id="my-id" class="uk-modal-container" uk-modal>...</div>
  • Открыть 
  • <a class="uk-button uk-button-default" href="#modal-container" uk-toggle>Открыть</a>

<div id="modal-container" class="uk-modal-container" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <h2 class="uk-modal-title">Заголовок</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Полноэкранный режим

Чтобы создать полноэкранное модальное окно, добавьте класс .uk-modal-full. Также рекомендуется добавить класс .uk-modal-close-full для кноки закрытия, чтобы адаптировать ее для этого режима.

<div id="my-id" class="uk-modal-full" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
    </div>
</div>

Используйте компоненты Сетка и Ширина, чтобы создать качественное полноэкранное модальное окно.

  • Открыть 
  • <a class="uk-button uk-button-default" href="#modal-full" uk-toggle>Открыть</a>

<div id="modal-full" class="uk-modal-full" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
        <div class="uk-grid-collapse uk-child-width-1-2@s uk-flex-middle" uk-grid>
            <div class="uk-background-cover" style="background-image: url('images/photo.jpg');" uk-height-viewport></div>
            <div class="uk-padding-large">
                <h1>Заголовок</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
</div>

Переполнение

По умолчанию страница будет прокручиваться, если ее содержимое превышает высоту окна. Для фиксации положения модального окна добавьте атрибут uk-overflow-auto из компонента Утилиты.

<div id="my-id" uk-modal>
    <div class="uk-modal-dialog" uk-overflow-auto></div>
</div>
  • Открыть 
  • <a class="uk-button uk-button-default" href="#modal-overflow" uk-toggle>Открыть</a>

<div id="modal-overflow" uk-modal>
    <div class="uk-modal-dialog">

        <button class="uk-modal-close-default" type="button" uk-close></button>

        <div class="uk-modal-header">
            <h2 class="uk-modal-title">Заголовок</h2>
        </div>

        <div class="uk-modal-body" uk-overflow-auto>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>

        <div class="uk-modal-footer uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Закрыть</button>
            <button class="uk-button uk-button-primary" type="button">Сохранить</button>
        </div>

    </div>
</div>

Мультимедиа

Если вы хотите отобразить мультимедиа, вы должны сначала попробовать специально предназначенный для этого компонент Lightbox. Тем не менее, вы также можете использовать модальные окана, чтобы иметь больше контроля над разметкой.

Внимание Используйте атрибут uk-video из компонента Видео чтобы убедиться, что видео останавливается при закрытии модального окна.

<div uk-modal>
    <div class="uk-modal-dialog uk-width-auto">
        <iframe src="" uk-video></iframe>
    </div>
</div>

  • Изображение Видео YouTube Vimeo 

  •  <p uk-margin>
    <a class="uk-button uk-button-default" href="#modal-media-image" uk-toggle>Изображение</a>
    <a class="uk-button uk-button-default" href="#modal-media-video" uk-toggle>Видео</a>
    <a class="uk-button uk-button-default" href="#modal-media-youtube" uk-toggle>YouTube</a>
    <a class="uk-button uk-button-default" href="#modal-media-vimeo" uk-toggle>Vimeo</a>
</p>

<div id="modal-media-image" class="uk-flex-top" uk-modal>
    <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
        <button class="uk-modal-close-outside" type="button" uk-close></button>
        <img src="images/photo.jpg" alt="">
    </div>
</div>

<div id="modal-media-video" class="uk-flex-top" uk-modal>
    <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
        <button class="uk-modal-close-outside" type="button" uk-close></button>
        <video controls playsinline uk-video>
            <source src="https://quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
            <source src="https://quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
        </video>
    </div>
</div>

<div id="modal-media-youtube" class="uk-flex-top" uk-modal>
    <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
        <button class="uk-modal-close-outside" type="button" uk-close></button>
        <iframe src="https://www.youtube-nocookie.com/embed/YE7VzlLtp-4" width="560" height="315" frameborder="0" uk-video></iframe>
    </div>
</div>

<div id="modal-media-vimeo" class="uk-flex-top" uk-modal>
    <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
        <button class="uk-modal-close-outside" type="button" uk-close></button>
        <iframe src="https://player.vimeo.com/video/1084537" width="500" height="281" frameborder="0" uk-video></iframe>
    </div>
</div>

Группы окон

Вы можете сгруппировать несколько модальных окно, связывая их друг с другом. Используйте это, чтобы создать многостраничные формы внутри ваших модаьных окон.

<div id="modal-group-1" uk-modal>
    <div class="uk-modal-dialog">
        <a href="#modal-group-2" uk-toggle>Вперед</a>
    </div>
</div>

<div id="modal-group-2" uk-modal>
    <div class="uk-modal-dialog">
        <a href="#modal-group-1" uk-toggle>Назад</a>
    </div>
</div>

  • Шаг 1 Шаг 2 

  • <p uk-margin>
    <a class="uk-button uk-button-default" href="#modal-group-1" uk-toggle>Шаг 1</a>
    <a class="uk-button uk-button-default" href="#modal-group-2" uk-toggle>Шаг 2</a>
</p>

<div id="modal-group-1" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div class="uk-modal-header">
            <h2 class="uk-modal-title">Заголовок 1</h2>
        </div>
        <div class="uk-modal-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="uk-modal-footer uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Закрыть</button>
            <a href="#modal-group-2" class="uk-button uk-button-primary" uk-toggle>Далее</a>
        </div>
    </div>
</div>

<div id="modal-group-2" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div class="uk-modal-header">
            <h2 class="uk-modal-title">Заголовок 2</h2>
        </div>
        <div class="uk-modal-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="uk-modal-footer uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Закрыть</button>
            <a href="#modal-group-1" class="uk-button uk-button-primary" uk-toggle>Далее</a>
        </div>
    </div>
</div>

Опции компонента

Любые опции из этого списка могут быть добавлены к атрибуту компонента. Отделяйте параметры друг от друга точкой с запятой. Подробнее о синтаксисе

Опция Значение По умолчанию Описание
esc-close Boolean true Разрешить закрытие окна кнопкой Esc.
bg-close Boolean true Закрытие окна по клику на оверлей.
stack Boolean false Наборы модальных окон, когда открыто более одного. По умолчанию предыдущее окно будет скрыто.
container String true Определите целевой контейнер с помощью селектора, чтобы указать, где модальный объект должен быть добавлен в DOM. Установите false, чтобы отменить это поведение.

JavaScript

Подробнее о компонентах JavaScript.

Инициализация

UIkit.modal(element, options);

Опции JavaScript

Имя По умолчанию Описание
cls-page 'uk-modal-page' Класс для добавления к <body> в момент отображения модального окна.
cls-panel 'uk-modal-dialog' Класс элемента, который следует считать диалогом модального окна.
sel-close '.uk-modal-close, .uk-modal-close-default, .uk-modal-close-outside, .uk-modal-close-full' CSS селектор для всех элементов, которые должны вызывать закрытие модального окна

Диалоги модальных окон

Компонент поставляется с рядом подготовленных модальных диалогов, которые вы можете использовать для взаимодействия с пользователем. Вы можете вызвать диалог напрямую из JavaScript и использовать функции обратного вызова для обработки ввода пользователя.

Код Описание
UIkit.modal.alert('UIkit alert!') Показать окно оповещения с одной кнопкой.
UIkit.modal.confirm('UIkit confirm!') Показать диалог подтверждения с вашим сообщением и двумя кнопками.
UIkit.modal.prompt('Name:', 'Your name') Показать диалог, запрашивающий ввод текста.
UIkit.modal.dialog('<p>UIkit dialog!</p>'); Показать диалог с любым содержимым HTML.

Для обработки ввода пользователя, модальное окно использует интерфейс then(), который обеспечивает функционал для регистрации ваших функций обратного вызова.

UIkit.modal.confirm('UIkit confirm!').then(function() {
    console.log('Confirmed.')
}, function () {
    console.log('Rejected.')
});

  • Диалог Оповещение Подтверждение Подсказка 

  • <p uk-margin>

    <a id="js-modal-dialog" class="uk-button uk-button-default" href="#">Диалог</a>

    <a id="js-modal-alert" class="uk-button uk-button-default" href="#">Оповещение</a>

    <a id="js-modal-confirm" class="uk-button uk-button-default" href="#">Подтверждение</a>

    <a id="js-modal-prompt" class="uk-button uk-button-default" href="#">Подсказка</a>

    <script>

       UIkit.util.on('#js-modal-dialog', 'click', function (e) {
           e.preventDefault();
           e.target.blur();
           UIkit.modal.dialog('<p class="uk-modal-body">UIkit dialog!</p>');
       });

       UIkit.util.on('#js-modal-alert', 'click', function (e) {
           e.preventDefault();
           e.target.blur();
           UIkit.modal.alert('UIkit alert!').then(function () {
               console.log('Alert closed.')
           });
       });

       UIkit.util.on('#js-modal-confirm', 'click', function (e) {
           e.preventDefault();
           e.target.blur();
           UIkit.modal.confirm('UIkit confirm!').then(function () {
               console.log('Confirmed.')
           }, function () {
               console.log('Rejected.')
           });
       });

       UIkit.util.on('#js-modal-prompt', 'click', function (e) {
           e.preventDefault();
           e.target.blur();
           UIkit.modal.prompt('Name:', 'Your name').then(function (name) {
               console.log('Prompted:', name)
           });
       });

    </script>

</p>

События

Следующие события будут инициированы для элементов, связанных с этим компонентом:

Имя Описание
beforeshow Срабатывает до отображения элемента.
show Срабатывает после отображения элемента.
shown Запускается после завершения анимации появления элемента.
beforehide Срабатывает до скрытия элемента.
hide Срабатывает после запуска анимации скрытия элемента.
hidden Срабатывает после того, как элемент скрыт.

Методы

Для компонента доступны следующие методы:

Show

UIkit.modal(element).show();

Отображает модальное окно.

Hide

UIkit.modal(element).hide();

Скрывает модальное окно.