模态框

使用不同的样式和过渡创建模态对话框。

用法

模态框组件由一个覆盖层、一个对话框和一个关闭按钮组成。

类	描述
`.uk-modal`	将此类添加到 `<div>` 元素以创建对话框容器和使页面变暗的覆盖层。为指示切换元素，添加一个 ID 非常重要。
`.uk-modal-dialog`	将此类添加到子 `<div>` 元素以创建对话框。
`.uk-modal-close`	将此类添加到 `<a>` 或 `<button>` 元素以在对话框内创建一个关闭按钮。我们建议从关闭组件中添加 `.uk-close` 类，以使按钮具有适当的样式，尽管您也可以使用文本或图像。

您可以使用任何元素来切换模态对话框。 <a> 元素需要链接到模态框的 ID。要启用必要的 JavaScript，请添加 data-uk-modal 属性。如果您使用另一个元素，如按钮，只需添加 data-uk-modal="{target:'#ID'}" 属性以定位模态框的 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}" 属性即可。

您可以在当前模态框内触发新的模态框。默认行为是在打开第二个模态框时关闭第一个模态框。您可以通过添加 data-uk-modal="{target:'#ID',modal:false}" 属性来防止这种情况发生。

您可以为模态框创建标题和页脚，它们与内容分隔开。只需将 .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>

对话框

模态框组件还提供了本机对话框的替代方案：window.alert、window.confirm 和 window.prompt。

示例

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`	事件	在模态框显示时
`hide.uk.modal`	事件	在模态框隐藏时

JavaScript 选项

选项	可能的值	默认值	描述
`keyboard`	布尔值	true	允许从键盘进行控制（ESC 关闭）
`bgclose`	布尔值	true	布尔值
`minScrollHeight`	整数	150	设置溢出容器开始滚动的最小高度
`center`	布尔值	布尔值	false
`modal`	布尔值	true	布尔值