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

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

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

Компонент Modal состоит из оверлея, диалогового окна и кнопки закрытия.

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

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

Пример

Ссылка на модальное окно

Разметка

<!-- Это ссылка запускающая модальное окно -->
<a href="#modal-id" data-uk-modal>...</a>

<!-- Это кнопка запускающая модальное окно -->
<button class="uk-button" data-uk-modal="{target:'#modal-id'}">...</button>

<!-- Это Modal -->
<div id="modal-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}".

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

Примеры

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

Пример

Привет! Я верхний колонтитул

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики. Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой.

Разметка

<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">
        <a class="uk-modal-close uk-close"></a>
        ...
        <!-- Это описание, подпись -->
        <div class="uk-modal-caption">...</div>
    </div>
</div>

Modal Center

Для вертикального центрирования модальной области добавьте в data-* атрибут параметр {center:true}.

Пример

Modal center:true

Разметка

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

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

Примеры

Разметка

<!-- Это анкор, переключающий Modal -->
<a href="#modal-id" data-uk-modal>...</a>

<!-- Это Modal -->
<div id="modal-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 из компонента Close, чтобы придать вашей кнопке стиль, соответствующий модальности лайтбокса.

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

Пример

Открыть Modal Blank

Разметка

<!-- Это якорная ссылка-переключатель -->
<a href="#modal-id" data-uk-modal>...</a>

<!-- Это Modal -->
<div id="modal-id" class="uk-modal">
    <div class="uk-modal-dialog uk-modal-dialog-blank">
    <button class="uk-modal-close uk-close" type="button"></button>
    <div class="uk-grid uk-flex-middle" data-uk-grid-margin>
            <div class="uk-width-medium-1-2 uk-height-viewport uk-cover-background" style="background-image: url('..');"></div>
            <div class="uk-width-medium-1-2">
                ...
            </div>
        </div>
    </div>
</div>

Чтобы поместить вращающуюся иконку внутри вашего модального объекта, добавьте класс .uk-modal-spinner к элементу <div> внутри модального диалога.

Пример

Открыть Spinner

Разметка

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

Модификатор Large Dialog

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

Пример

Открыть Large Dialog

Разметка

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

Modal и Overflow container

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

Пример

Открыть

Разметка

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

Dialogs

Компонент Modal также предоставляет альтернативы диалоговым окнам: window.alert, window.confirm и window.prompt.

Пример

UIkit.modal.alert("Внимание!");
UIkit.modal.confirm("Вы уверены?", 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("Любой контент..."); // modal.hide() to unblock

JavaScript

Вы можете управлять модальными диалогами с помощью чистого JavaScript.

Пример

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

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

Events

Компонент Modal запускает событие 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.");
    }
});
Name Parameter Description
show.uk.modal event On modal show
hide.uk.modal event On modal hide

JavaScript options

Опция Значение По умолчанию Описание
keyboard boolean true Разрешает управление с клавиатуры (ESC, чтобы закрыть)
bgclose boolean true Разрешает закрытие модального автоматически при нажатии на модальный overlay
minScrollHeight integer 150 Устанавливает высоту для overflow container, чтобы начать прокрутку
center boolean false Модальное вертикально по центру
modal boolean true Закрытие текущих открытых модалок при открытии Modal