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

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

Модальный компонент состоит из перекрытия (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>
  • <!-- This is a button toggling the modal with the default close button -->
    <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>
    <!-- This is the modal with the outside close 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>
  • Открыть
  • <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>
Примечание Для поддержки IE 11 Модальному контейнеру необходим .uk-flex-top.

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

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

Класс Описание
.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>Другой, свежий, розовый гвардейский офицер, безупречно вымытый, застегнутый и причесанный, держал янтарь у середины рта и розовыми губами слегка вытягивал дымок. Было то время перед званым обедом, когда собравшиеся гости не начинают длинного разговора в ожидании призыва к закуске.</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">
                    <h1>Модальный заголовок</h1>
                    <p>На портрете была изображена дама в меховой шляпе и боа, она сидела очень прямо и протягивала зрителю тяжелую меховую муфту, в которой целиком исчезала ее рука. Затем взгляд Грегора устремился в окно, и пасмурная погода – слышно было, как по жести подоконника стучат капли дождя – привела его и вовсе в грустное настроение. «Хорошо бы еще немного поспать и забыть всю эту чепуху», – подумал он, но это было совершенно неосуществимо, он привык спать на правом боку.</p>
                </div>
            </div>
        </div>
    </div>

Плюшка-утилита «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" alt="" uk-img>
        </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" controls playsinline uk-video></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" 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>

Дополнительные примеры с изображением

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

  • <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" alt="">
        </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" alt="">
        </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>

Параметры компонента

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

Опция Значение По умолчанию Описание
esc-close Boolean true Закрытие модального при нажатии клавиши Esc.
bg-close Boolean true Закрытие модального при нажатии на фон.
stack Boolean false Модальные стеки, когда открыто более одного. По умолчанию предыдущее модальное будет скрыто.
container String true Определите целевой контейнер с помощью селектора, чтобы указать, где модальный объект должен быть добавлен в DOM. Установка в false предотвратит это поведение.
cls-page String 'uk-modal-page' Класс для добавления в <body>, когда модальное окно активно.
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);

События

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

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

Методы

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

Show

UIkit.modal(element).show();

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

Hide

UIkit.modal(element).hide();

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


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

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

To process the user input, the modal uses a promise based interface which provides a then() function to register your callback functions.

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

  • 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(event) {
    
           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>
Документация
Компоненты