image.png

为啥叫模态对话框？

不知道，叫遮盖对话框更好。因为弹出对话框的同时，背景被遮盖了。

举个例子

如下代码设置了三种激活对话框的方式，用的时候任选一种即可。

<a href="#my" data-uk-modal>click me</a>
<!-- use a to invoke dailog -->
<button class="uk-button" data-uk-modal="{target:'#my'}">click me</button>
<!-- use button to invoke dialog -->
<p data-uk-modal="{target:'#my'}">click me</p>
<!-- use p to invoke dialog -->

<div id="my" class="uk-modal">
    <!-- cerate dialog -->
    <div class="uk-modal-dialog">
        <div class="uk-modal-close uk-close"> </div>
        you have seen the effect
    </div>
</div>

其中class="uk-modal这一步是创建遮罩的。
class="uk-modal-dialog"这一步是创建对话框的，
class="uk-modal-close uk-close"这一步是创建对话框的关闭按钮的，也就是右上角的x。
最后弹出的对话框样式如下

image.png

参考

模态对话框 - UIkit 中文文档