Компонент Модальное окно Modal

Шикарный компонент для создания модальных диалоговых окон с разными стилями и переходами. Модификаторы. Руководство.

Модальный компонент состоит из перекрытия (overlay), диалогового окна и необязательной кнопки закрытия. Вы можете использовать любой элемент для переключения модального окна.

Руководство

Modal

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

<!-- Это кнопка для открытия модального окна -->
<button type="button" uk-toggle="target: #modal-id">Кнопка</button>

<!-- Это ссылка-якорь для открытия модального окна -->
<a href="#modal-id" uk-toggle>Ссылка</a>

Добавьте к элементу <div> атрибут uk-modal, чтобы создать модальный контейнер и наложение (перекрытие, overlay), которое затемняет страницу. Важно добавить 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>Их было пять. Старшая, чистоплотная, с длинною талией, строгая девица, та самая, которая выходила к Ольге Михайловне, читала; младшие, обе румяные и хорошенькие, отличавшиеся друг от друга только тем, что у одной была родинка над губой, очень красившая ее, шили в пяльцах.</p>
        <p>Пусть я не верю в порядок вещей, но дороги мне клейкие, распускающиеся весной листочки, дорого голубое небо, дорог иной человек, которого иной раз, поверишь ли, не знаешь за что и любишь, дорог иной подвиг человеческий, в который давно уже, может быть, перестал и верить, а все-таки по старой памяти чтишь его сердцем.</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 из компонента Значок закрытия, чтобы применить иконочный значок закрытия.

<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-primary 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>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты.</p>
    </div>
</div>

<!-- Это кнопка переключения модального окна с внешней кнопкой закрытия -->
<button class="uk-button uk-button-primary 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">Outside</h2>
        <p>Как бы выразить, как бы вдохнуть в рисунок то, что так полно, так трепетно живет во мне, запечатлеть отражение моей души!</p>
        <p>Когда от милой моей долины поднимается пар и полдневное солнце стоит над непроницаемой чащей темного леса и лишь редкий луч проскальзывает в его святая святых, а я лежу в высокой траве у быстрого ручья и, прильнув к земле, вижу тысячи всевозможных былинок и чувствую.</p>
        <p>Как близок моему сердцу крошечный мирок, что снует между стебельками, наблюдаю эти неисчислимые, непостижимые разновидности.</p>        
    </div>
</div>

Ценрирование

Модальное окно в режиме «Center»

Для вертикального центрирования модального окна вы можете использовать класс .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>
Примечание Для поддержки IE 11 Модальному контейнеру необходим .uk-flex-top.
  • Открыть 
  • <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>Любоваться, но все-таки не любить. Но довольно об этом. Мне надо было лишь поставить тебя на мою точку. Но вот, однако, одна меня сильно заинтересовавшая картинка. И уж конечно, так делая, никто из них не задумывался и не раскаивался, напротив, считал себя в полном праве.</p>
        <p>Хорошо дома! Сидишь перед монитором, лохматая, в пижаме, а все думают - красавица, как на аватарке. </p>
    </div>
</div>

Верхний и нижний колонтитулы. Header и Footer

Стилизованные модальный заголовок (хедер) и нижний колонтитул (футер) внутри модального окна. Чтобы разделить в модальном окне информацию на разные разделы контента, используйте следующие классы:

Класс Описание
.uk-modal-header Добавьте этот класс к элементу <div> или <header>
чтобы создать модальный заголовок ("хедер", "шапку").
.uk-modal-footer Добавьте класс к элементу <div> или <footer>
чтобы создать в модальном окне нижний колонтитул ("подвал", "футер").

Разметка

<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>Другой, свежий, розовый гвардейский офицер, безупречно вымытый, застегнутый и причесанный, держал янтарь у середины рта и розовыми губами слегка вытягивал дымок. Было то время перед званым обедом, когда собравшиеся гости не начинают длинного разговора в ожидании призыва к закуске.</p>
            <p>Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты.</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>

Модификатор «Container»

Добавьте класс .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>Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в страшное насекомое.</p>
        <p>Лежа на панцирнотвердой спине, он видел, стоило ему приподнять голову, свой коричневый, выпуклый, разделенный дугообразными чешуйками живот, на верхушке которого еле держалось готовое вот-вот окончательно сползти одеяло. Его многочисленные, убого тонкие по сравнению с остальным телом ножки беспомощно копошились у него перед глазами.</p>
    </div>
</div>

Модификатор «Full»

Чтобы создать модальное окно, которое полностью заполняет всю страницу, добавьте класс .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>

Используя классы компонентов Grid и Width, вы можете создать красивое, полноэкранное модальное окно.

  • На весь экран 
  • <a class="uk-button uk-button-primary" 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('/demo/img/photo.jpg');" uk-height-viewport></div>
            <div class="uk-padding-large">
                <h3>Модальный заголовок</h3>
                <p>
                	На портрете была изображена дама в меховой шляпе и боа, 
                	она сидела очень прямо и протягивала зрителю тяжелую меховую муфту, в которой целиком исчезала ее рука. 
                	Затем взгляд Грегора устремился в окно, и пасмурная погода – слышно было, 
                	как по жести подоконника стучат капли дождя – привела его и вовсе в грустное настроение. 
                	«Хорошо бы еще немного поспать и забыть всю эту чепуху», – подумал он, 
                	но это было совершенно неосуществимо, он привык спать на правом боку.
                </p>
            </div>
        </div>
    </div>
</div>

Утилита «Overflow»

Плюшка-утилита «Overflow»

Страница в модальном окне будет прокручиваться по умолчанию, если ее содержимое превышает высоту окна. Чтобы применить полосу прокрутки внутри модального окна, добавьте атрибут uk-overflow-auto из компонента Utility в контейнер с модальным контентом, к примеру, который содержит класс .uk-modal-body. 

<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>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.</p>
            <p>Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.</p>
            <p>Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить себя с толку. Он собрал семь своих заглавных букв, подпоясал инициал за пояс и пустился в дорогу.</p>
            <p>Взобравшись на первую вершину курсивных гор, бросил он последний взгляд назад, на силуэт своего родного города Буквоград, на заголовок деревни Алфавит и на подзаголовок своего переулка Строчка. Грустный риторический вопрос скатился по его щеке и он продолжил свой путь. По дороге встретил текст рукопись. Она предупредила его: «В моей стране все переписывается по несколько раз.</p>
            <p>Единственное, что от меня осталось, это приставка «и». Возвращайся ты лучше в свою безопасную страну». Не послушавшись рукописи, наш текст продолжил свой путь. Вскоре ему повстречался коварный составитель рекламных текстов, напоивший его языком и речью и заманивший в свое агенство, которое использовало его снова и снова в своих проектах. И если его не переписали, то живет он там до сих пор.</p>
            <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот.</p>
            <p>Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики. Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить себя с толку.</p>
            <p>Он собрал семь своих заглавных букв, подпоясал инициал за пояс и пустился в дорогу. Взобравшись на первую вершину курсивных гор, бросил он последний взгляд назад, на силуэт своего родного города Буквоград, на заголовок деревни Алфавит и на подзаголовок своего переулка Строчка. Грустный риторический вопрос скатился по его щеке и он продолжил свой путь. По дороге встретил текст рукопись.</p>
            <p>Она предупредила его: «В моей стране все переписывается по несколько раз. Единственное, что от меня осталось, это приставка «и». Возвращайся ты лучше в свою безопасную страну». Не послушавшись рукописи, наш текст продолжил свой путь. Вскоре ему повстречался коварный составитель рекламных текстов, напоивший его языком и речью и заманивший в свое агенство, которое использовало его снова и снова в своих проектах. И если его не переписали, то живет он там до сих пор. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и</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>

Мультимедиа

Media

Если вы хотите отображать мультимедиа в модальном окне, сначала проверьте, не содержит ли компонент 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="/demo/img/photo.jpg" width="1800" height="1200" loading="lazy" 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 src="/demo/video/caminandes_llamigos.mp4" width="1920" height="1080" controls playsinline uk-video preload="none"></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/WhWc3b3KhnY" width="960" height="540" uk-video uk-responsive loading="lazy"></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" uk-video uk-responsive loading="lazy"></iframe>
    </div>
</div>

  • Изображение + диалоговое окно Изображение + диалоговое окно + внутренние отступы

    Тестовое изображение 
  • <p uk-margin>
    <a class="uk-button uk-button-default" href="#modal-media-image-dialog" uk-toggle>Изображение + диалоговое окно</a>
    <a class="uk-button uk-button-default" href="#modal-media-image-body" uk-toggle>Изображение + диалоговое окно + внутренние отступы</a>
</p>
<div id="modal-media-image-dialog" class="uk-flex-top" uk-modal>
    <div class="uk-modal-dialog uk-margin-auto-vertical">
        <button class="uk-modal-close-outside" type="button" uk-close></button>
        <img src="/demo/img/photo.jpg" width="900" height="600" alt="Тестовое изображение" loading="lazy">
    </div>
</div>
<div id="modal-media-image-body" class="uk-flex-top" uk-modal>
    <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
        <button class="uk-modal-close-outside" type="button" uk-close></button>
        <img src="/demo/img/photo.jpg" width="900" height="600" alt="Тестовое изображение" loading="lazy">
    </div>
</div>

Модальные группы

Вызвать модальное окно из модального окна

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

<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>Ну вот живет генерал в своем поместье в две тысячи душ, чванится, третирует мелких соседей как приживальщиков и шутов своих. Всё, что ты вновь возвестишь, посягнет на свободу веры людей, ибо явится как чудо, а свобода их веры тебе была дороже всего еще тогда, полторы тысячи лет назад.</p>
            <p>Вспомни первый вопрос; хоть и не буквально, но смысл его тот. Вместо твердого древнего закона — свободным сердцем должен был человек решать впредь сам, что добро...</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>Скажут это они в отчаянии, и сказанное ими будет богохульством, от которого они станут еще несчастнее, ибо природа. Кто знает, может быть, случались и между римскими первосвященниками эти единые. Даже подивиться можно было нелогичности и беспорядку иных желаний его, поневоле выходивших наружу и всегда одинаково неясных. Вот они и поймут, что нечто случилось внезапное и что оченно надо мне их видеть, и тоже мне отопрут, а я войду и доложу.</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>

Параметры для атрибута

При использовании компонента Modal к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

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

Опция Значение По умолчанию Описание
esc-close Boolean true Закрытие модального при нажатии клавиши Esc.
bg-close Boolean true Закрытие модального при нажатии на фон.
stack Boolean false Модальные стеки, когда открыто более одного. По умолчанию предыдущее модальное будет скрыто.
container String true Определите целевой контейнер с помощью селектора, чтобы указать, где модальный объект должен быть добавлен в DOM. Установка в false предотвратит это поведение.
cls-page String uk-modal-page Класс для добавления в <htm>, когда модальное окно активно.
cls-panel String uk-modal-dialog Класс элемента, который следует считать модальной панелью.
sel-close String .uk-modal-close, .uk-modal-close-default, .uk-modal-close-outside, .uk-modal-close-full CSS селектор для всех элементов, которые должны вызывать закрытие модального окна.

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

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

UIkit.modal(element, options);

События

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

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

Методы

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

Show

UIkit.modal(element).show();

Показывает модальное окно.

Hide

UIkit.modal(element).hide();

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

Пример скрытия

Пример кода для скрытия открытого модального окна с ID myModal. При нажатии на кнопку с ID myBtnClose метод setTimeout() установит таймаут, модальное окно будет закрыто через четыре секунды. В примере испольуется JavaScript утилита UIkit.util.on(). 

util.on('#myBtnClose', 'click', () => {
	setTimeout(() => UIkit.modal('#myModal.uk-open').hide(), 4000)
})

// Аналогично
const myBtnClose = document.querySelector('#myBtnClose');

myBtnClose.addEventListener('click', function(event) {
	setTimeout(function() { 
		UIkit.modal('#myModal.uk-open').hide();
	}, 4000)
}, false );

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

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

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

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

Возвращаемое обещание (дословный перевод слова "промис") имеет свойство dialog, которое содержит ссылку на само модальное окно. Это позволяет вам манипулировать, например, разметкой модального элемента.

Для перевода надписей на кнопках диалоговые функции принимают необязательный параметр объекта options. У него есть ключ i18n и два свойства ok и cancel. 

// const modal = UIkit.modal.confirm('UIkit confirm!', {i18n: {ok: 'okay123', cancel: 'cancel'}}).dialog;

const modal = UIkit.modal.confirm('UIkit confirm!').dialog; // Модальный компонент
const el = modal.$el; // Модальный элемент
  • Alert Confirm Prompt Dialog 
  • <div class="uk-margin" uk-margin>    
	<a id="js-modal-alert" class="uk-button uk-button-primary" href="#">Alert</a>
	<a id="js-modal-confirm" class="uk-button uk-button-primary" href="#">Confirm</a>
	<a id="js-modal-prompt" class="uk-button uk-button-primary" href="#">Prompt</a>
	<a id="js-modal-dialog" class="uk-button uk-button-primary" href="#">Dialog</a>
	
	<script>
		document.addEventListener("DOMContentLoaded", function(e) {

			UIkit.util.on('#js-modal-alert', 'click', function (e) {
				e.preventDefault();
				e.target.blur();
				UIkit.modal.alert('Уведомление Alert UIkit 3!').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('Имя:', 'Ваше имя').then(function (name) {
					console.log('Prompted:', name)
				});
			});

			UIkit.util.on('#js-modal-dialog', 'click', function (e) {
				e.preventDefault();
				e.target.blur();
				UIkit.modal.dialog('<p class="uk-modal-body">UIkit 3 диалог!</p>');
			});
			
		}); 
	</script>
</div>

Доступность

Компонент «Модальное окно» (Modal) придерживается Dialog (Modal) Pattern и автоматически устанавливает соответствующие роли, состояния и свойства WAI-ARIA.

  • Область modal имеет роль dialog и свойство aria-modal.

Компонент Close автоматически устанавливает соответствующие роли и свойства WAI-ARIA.

  • Значок закрытия имеет свойство aria-label, а если используется элемент <a>, то роль button.

Взаимодействие с клавиатурой

Доступ к модальному компоненту можно получить с помощью клавиатуры, используя следующие клавиши:

  • Клавиша esc закрывает модальное окно.
    Если параметр установлен bg-close: false, то это поведение отключено.