Модальные

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

Использование

Модальный компонент включает оверлей, диалоговое окно и кнопка закрытия окна.

Класс	Описание
`.uk-modal`	Добавьте этот класс к `<div>` элемент для создания диалогового окна контейнера и наложить заготовки на страницу. Важно добавить идентификатор, чтобы указать элемент, для переключения между ними.
`.uk-modal-dialog`	Добавить этот класс, чтобы ребенок `<div>` элемент для создания диалогового окна.
`.uk-modal-close`	Добавить этот класс в сообщение `<a>` или `<button>` элемент для создания кнопки "закрыть" в диалоговом окне. Мы рекомендуем добавить `.uk-close` класс Следующих компонент дать кнопку правильную укладку, хотя вы можете также использовать текст или изображение.

Вы можете использовать любой элемент для переключения модальное диалоговое окно. Сообщение <a> элемент должен быть связан с модальной личности. Чтобы включить необходимые JavaScript, добавить data-uk-modal атрибут. Если вы используете другой элемент, как кнопка, просто добавьте data-uk-modal="{target:'#ID'}" атрибут значение целевой модальной личности.

Пример

Открыть

Разметки

<!-- This is an anchor toggling the modal -->
<a href="#my-id" data-uk-modal>...</a>

<!-- This is a button toggling the modal -->
<button class="uk-button" data-uk-modal="{target:'#my-id'}">...</button>

<!-- This is the modal -->
<div id="my-id" class="uk-modal">
    <div class="uk-modal-dialog">
        <a class="uk-modal-close uk-close"></a>
        ...
    </div>
</div>

JavaScript варианты

По умолчанию модальные закрывается автоматически при нажатии на модальные наложения. Чтобы этого не случилось, просто добавьте data-uk-modal="{target:'#ID',bgclose:false}" атрибут.

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

Вы можете создать колонтитулы для вашего модальные, которые отделены от Контента. Просто добавить .uk-modal-header или .uk-modal-footer класс <div> элемент в модальном окне.

Пример

Разметки

<div class="uk-modal">
    <div class="uk-modal-dialog">
        <div class="uk-modal-header">...</div>
        ...
        <div class="uk-modal-footer">...</div>
    </div>
</div>

Вы также можете создать подпись, которая будет располагаться за пределами модального. Просто добавить .uk-modal-caption класс <div> элемент в модальном окне.

Пример

Разметки

<div class="uk-modal">
    <div class="uk-modal-dialog">
        <div class="uk-modal-caption">...</div>
    </div>
</div>

Чтобы создать лайтбокс-как модальное диалоговое окно, просто добавьте .uk-modal-dialog-lightbox класс. Это может быть полезно, если вы хотите использовать модальные качестве лайтбокс для изображений. Кнопка закрыть отрегулируйте ее положение автоматически в диалоговом окне.

Пример

Разметки

<!-- This is the anchor toggling the modal -->
<a href="#my-id" data-uk-modal>...</a>

<!-- This is the modal -->
<div id="my-id" class="uk-modal">
    <div class="uk-modal-dialog uk-modal-dialog-lightbox">
        <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
        <img src="" alt="">
    </div>
</div>

Примечание при создании кнопки "закрыть" внутри лайтбокса модификатор, мы также рекомендуем добавить .uk-close-alt класс Следующих компонент к кнопка "закрыть", чтобы дать вашей кнопки стайлинга, который подходит лайтбокс модальные.

Модальные пустой

Чтобы сбросить все укладки, как внутренний отступ и отступ добавить .uk-modal-dialog-blank класс. Это может быть полезно, если вы хотите создать полноэкранный модала. В этом случае вы также должны добавить .uk-height-viewport класс Утилита компонента так, что модальные распространяется на всю высоту области просмотра.

Пример

Открыть

<!-- This is the anchor toggling the modal -->
<a href="#my-id" data-uk-modal>...</a>

<!-- This is the modal -->
<div id="my-id" class="uk-modal">
    <div class="uk-modal-dialog uk-modal-dialog-blank">...</div>
</div>

Разместить закручивая иконка внутри модального, добавить .uk-modal-spinner класс <div> элемент в модальном окне.

Пример

Открыть

Разметки

<div class="uk-modal">
    <div class="uk-modal-dialog">
        <div class="uk-modal-spinner">...</div>
    </div>
</div>

По вертикали центр модального, добавить {center:true} опции к Data-атрибут.

Пример

Открыть

Разметки

<a href="#my-id" data-uk-modal="{center:true}"></a>

Большие диалоговом модификатора

Чтобы применить контейнера Ширина для модального диалогового окна, просто добавьте .uk-modal-dialog-large класс.

Пример

Открыть

Разметки

<div class="uk-modal-dialog uk-modal-dialog-large">...</div>

Вы можете также отобразить модальное содержание в прокручиваемом контейнере. Просто добавить .uk-overflow-container класс <div> элемент в модальном окне. Модальное будет автоматически расширять и наполнять сайт высота.

Пример

Открыть

Заголовок

Текст выше прокручивать окно

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Переполнения контейнера

Текст ниже переполнения контейнера

Разметки

<div class="uk-modal-dialog">
    <p>...</p>
    <div class="uk-overflow-container">...</div>
    <p>...</p>
</div>

Диалоги

Модальный компонент также предоставляет альтернативы родной диалоговые окна: окно.алерт, окно.подтвердить и окна.подскажут.

Пример

UIkit.modal.alert("Attention!");

UIkit.modal.confirm("Are you sure?", function(){
    // will be executed on confirm.
}[, oncanel, options]);

UIkit.modal.prompt("Name:", value, function(newvalue){
    // will be executed on submit.
});

var modal = UIkit.modal.blockUI("Any content..."); // modal.hide() to unblock

JavaScript

Вы можете обрабатывать модальные диалоговые окна через примитивный JavaScript.

Пример

var modal = UIkit.modal(".modalSelector");

if ( modal.isActive() ) {
    modal.hide();
} else {
    modal.show();
}

События

Модальный компонент инициирует show.uk.modal событие каждый раз, когда модальное открыто и hide.uk.modal При модальном закрыт.

Пример

$('.modalSelector').on({

    'show.uk.modal': function(){
        console.log("Modal is visible.");
    },

    'hide.uk.modal': function(){
        console.log("Element is not visible.");
    }
});

Название	Параметр	Описание
`show.uk.modal`	event	На модальный шоу
`hide.uk.modal`	event	На модальной скрыть

JavaScript варианты

Вариант	Возможное значение	По умолчанию	Описание
`keyboard`	boolean	true	Позволяет управление с клавиатуры (ESC, чтобы закрыть)
`bgclose`	boolean	true	Разрешить модальные автоматическое закрытие при нажатии на модальное наложение
`minScrollHeight`	integer	150	Набор высоты за переполнения контейнера для запуска прокрутки
`center`	boolean	false	Вертикально-центр модал
`modal`	boolean	true	Закрыть открытые модальные глаголы на открытие модального