使用UIkit制作弹出模态框需引入框架文件，通过uk-modal创建基本结构，支持多种类型与自定义配置，如全屏模态和ESC关闭等，配合触发按钮实现交互，确保JS正常运行以启用功能。
使用UIkit制作弹出模态框非常简单，只需引入UIkit框架并按照其预定义的HTML结构编写即可。UIkit 提供了丰富的模态框类型，包括基本模态、全屏模态、带表单的模态等，且默认自带动画效果和响应式支持。
1. 引入UIkit框架
在页面中引入UIkit的CSS和JS文件，可以通过CDN方式快速接入：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/css/uikit.min.css" /><script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit-icons.min.js"></script>
2. 创建基本模态框结构
使用 uk-modal 属性创建模态容器，并通过触发元素（如按钮）打开它。
<button class="uk-button uk-button-primary" type="button" uk-toggle="target: #myModal">打开模态框</button>
<!-- 模态框 -->
<div id="myModal" class="uk-modal-container" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">标题</h2>
<p>这里是模态框内容。</p>
<p class="uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">取消</button>
<button class="uk-button uk-button-primary" type="button">确认</button>
</p>
</div>
</div>
3. 常用配置选项
你可以通过 uk-modal 的参数自定义行为：
立即学习“前端免费学习笔记（深入）”；
- esc-close: true – 按ESC键关闭模态框
- bg-close: true – 点击背景关闭（默认开启）
- container: false – 控制是否将模态框附加到body
示例：禁用点击背景关闭
uk-modal="bg-close: false"4. 其他模态框类型
UIkit 支持多种样式，例如全屏模态或带iframe的内容。
- 添加
uk-modal-full类实现全屏模态 - 使用
<iframe>加载外部页面 - 配合
uk-height-max-medium控制最大高度
基本上就这些，不复杂但容易忽略细节。只要结构正确，UIkit会自动处理显示、动画和交互。确保JavaScript未被阻止，否则模态功能将无法工作。
