跳到主要内容

文档

Modal

创建具有不同样式和过渡效果的模态对话框。

用法

模态框（Modal）组件由遮罩层、对话框以及可选的关闭按钮组成。你可以用任意元素来切换模态对话框。要启用所需的 JavaScript，请添加 uk-toggle 属性。<a> 元素需要链接到模态框的 id。如果你使用其他元素，例如按钮，只需添加 uk-toggle="target: #ID" 属性，指向模态容器的 id。

为 <div> 元素添加 uk-modal 属性，以创建模态容器以及遮挡页面的遮罩层。务必添加一个 id，以标明用于切换的元素。使用以下类来定义模态框的各个部分。

类 描述
.uk-modal-dialog 将该类添加到子 <div> 元素以创建对话框
.uk-modal-body 添加该类以在模态框与其内容之间创建内边距。
.uk-modal-title 将该类添加到标题元素以创建模态标题。
.uk-modal-close 将该类添加到 <a> 或 <button> 元素以创建关闭按钮并启用其功能。 
<!-- This is a button toggling the modal -->
<button uk-toggle="target: #my-id" type="button"></button>

<!-- This is the modal -->
<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>
Open 
<!-- This is a button toggling the modal -->
<button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #modal-example">Open</button>

<!-- This is an anchor toggling the modal -->
<a href="#modal-example" uk-toggle>Open</a>

<!-- This is the modal -->
<div id="modal-example" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">Headline</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">Cancel</button>
            <button class="uk-button uk-button-primary" type="button">Save</button>
        </p>
    </div>
</div>

关闭按钮

要创建关闭按钮、启用其功能并添加合适的样式和定位，请为 <a> 或 <button> 元素添加 .uk-modal-close-default 类。要把关闭按钮放到模态框外部，请添加 .uk-modal-close-outside 类。

添加 Close 组件中的 uk-close 属性，以应用关闭图标。

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

<div>
    <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-default uk-margin-small-right" type="button" uk-toggle="target: #modal-close-default">Default</button>

<!-- This is the modal with the default close 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">Default</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>

<!-- This is a button toggling the modal with the outside close button -->
<button class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #modal-close-outside">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>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>

居中模态框

要使模态对话框垂直居中，你可以使用 Margin 组件中的 .uk-margin-auto-vertical 类。

<div class="uk-flex-top" uk-modal>
    <div class="uk-modal-dialog uk-margin-auto-vertical"></div>
</div>
Open 
<a class="uk-button uk-button-default" href="#modal-center" uk-toggle>Open</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>

注意 为了支持 IE 11，需要在模态容器上添加 .uk-flex-top。

页眉与页脚

要将模态框划分为不同的内容区块，请使用以下类。

类 描述
.uk-modal-header 将该类添加到 <div> 元素以创建模态页眉。
.uk-modal-footer 将该类添加到 <div> 元素以创建模态页脚。 
<div 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>
Open 
<a class="uk-button uk-button-default" href="#modal-sections" uk-toggle>Open</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">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">Cancel</button>
            <button class="uk-button uk-button-primary" type="button">Save</button>
        </div>
    </div>
</div>

容器修饰符

添加 .uk-modal-container 类，将模态对话框扩展到默认的 Container 宽度。

<div class="uk-modal-container" uk-modal>…</div>
Open 
<a class="uk-button uk-button-default" href="#modal-container" uk-toggle>Open</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">Headline</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 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 类，可以创建一个漂亮的全屏分栏模态框。

Open 
<a class="uk-button uk-button-default" href="#modal-full" uk-toggle>Open</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>Headline</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>

溢出

默认情况下，如果内容超出窗口高度，页面会随模态框一起滚动。要在模态框内部应用滚动条，请为模态框主体添加 Utility 组件中的 uk-overflow-auto 属性。

<div uk-modal>
    <div class="uk-modal-dialog" uk-overflow-auto></div>
</div>
Open 
<a class="uk-button uk-button-default" href="#modal-overflow" uk-toggle>Open</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">Headline</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">Cancel</button>
            <button class="uk-button uk-button-primary" type="button">Save</button>
        </div>

    </div>
</div>

媒体

如果你想展示媒体内容，应先确认 Lightbox 组件是否已经提供了你所需的全部功能。不过，你也可以使用模态框，以便更灵活地控制包裹媒体的标记。

注意 使用 Video 组件中的 uk-video 属性，确保模态框关闭时视频停止播放。

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

Image Video YouTube Vimeo 

 <p uk-margin>
    <a class="uk-button uk-button-default" href="#modal-media-image" uk-toggle>Image</a>
    <a class="uk-button uk-button-default" href="#modal-media-video" uk-toggle>Video</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" width="1800" height="1200" 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="https://yootheme.com/media/videos/yootheme-pro.mp4" width="1920" height="1080" 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/c2pz2mlSfXA" width="1920" height="1080" loading="lazy" uk-video uk-responsive></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="1280" height="720" loading="lazy" uk-video uk-responsive></iframe>
    </div>
</div>

分组

你可以把多个模态框相互链接起来，从一个跳转到另一个再返回，从而将它们分组。可用此方式在模态框内创建多步骤向导。

<div id="modal-group-1" uk-modal>
    <div class="uk-modal-dialog">
        <a href="#modal-group-2" uk-toggle>Next</a>
    </div>
</div>

<div id="modal-group-2" uk-modal>
    <div class="uk-modal-dialog">
        <a href="#modal-group-1" uk-toggle>Previous</a>
    </div>
</div>

Modal 1 Modal 2 

<p uk-margin>
    <a class="uk-button uk-button-default" href="#modal-group-1" uk-toggle>Modal 1</a>
    <a class="uk-button uk-button-default" href="#modal-group-2" uk-toggle>Modal 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">Headline 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">Cancel</button>
            <a href="#modal-group-2" class="uk-button uk-button-primary" uk-toggle>Next</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">Headline 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">Cancel</button>
            <a href="#modal-group-1" class="uk-button uk-button-primary" uk-toggle>Previous</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 模态框激活时添加到 <html> 的类
cls-panel String uk-modal-dialog 被视为模态框面板的元素的类
sel-close String [class*="uk-modal-close"] 所有应触发关闭模态框的元素所用的 CSS 选择器

JavaScript

了解关于 JavaScript 组件的更多内容。

初始化

UIkit.modal(element, options);

事件

以下事件将在绑定该组件的元素上触发：

名称 描述
beforeshow 在项目显示之前触发。
show 在项目显示之后触发。
shown 在项目的显示动画完成后触发。
beforehide 在项目隐藏之前触发。
hide 在项目的隐藏动画开始后触发。
hidden 在项目隐藏之后触发。

方法

该组件提供以下方法：

Show

UIkit.modal(element).show();

显示模态框。

Hide

UIkit.modal(element).hide();

隐藏模态框。

模态对话框

该组件内置了若干预置的模态对话框，可用于用户交互。你可以直接从 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 内容的对话框。

注意 消息和标签会作为 HTML 渲染。清理转义是开发者的责任。

为处理用户输入，模态框使用基于 Promise 的接口，它提供 then() 函数来注册回调函数。不过 UIkit.modal.dialog 函数会返回模态框本身。

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

返回的 Promise 有一个 dialog 属性，其中保存着模态框本身的引用。这让你可以操作模态框元素的标记等内容。

要翻译按钮标签，对话框函数接受一个可选的 options 对象参数。它包含一个键 i18n，以及 ok 和 cancel 两个属性。

const modal = UIkit.modal.confirm('UIkit confirm!', {i18n: {ok: 'okay'}}).dialog; // The modal component
const el = modal.$el; // The modal element

Dialog Alert Confirm Prompt 

<p uk-margin>

    <a id="js-modal-dialog" class="uk-button uk-button-default" href="#">Dialog</a>

    <a id="js-modal-alert" class="uk-button uk-button-default" href="#">Alert</a>

    <a id="js-modal-confirm" class="uk-button uk-button-default" href="#">Confirm</a>

    <a id="js-modal-prompt" class="uk-button uk-button-default" href="#">Prompt</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>

可访问性

模态框（Modal）组件遵循 Dialog (Modal) WAI-ARIA 设计模式，并自动设置合适的 WAI-ARIA 角色和属性。

Close 组件会自动设置合适的 WAI-ARIA 角色和属性。

键盘交互

模态框（Modal）组件可以通过键盘操作，使用以下按键。