<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MUI弹出框--Test</title>
<link rel="stylesheet" href="../../../assets/plugin/mui/css/mui.min.css">
<script src="../../../assets/plugin/mui/js/mui.min.js"></script>
</head>
<body>
<!--1，弹出框：自动消失-->
<button onclick="a()">toast</button>
<!--2，弹出框：确定-->
<button onclick="b()">alert</button>
<!--3，弹出框：取消，确定-->
<button onclick="c()">prompt</button>
<!--底部按钮-->
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item" href="#popover">
<span class="mui-icon mui-icon-undo"></span>
</a>
<a class="mui-tab-item" href="#forward">
<span class="mui-icon mui-icon-undo"></span>
</a>
</nav>
<!--4，弹出框：底部弹出样式1-->
<div id="popover" class="mui-popover" style="height: 250px;top:100px">
<div class="mui-popover-arrow"></div>
<div align="center">自定义位置弹出层</div>
<br>
<table border="1" align="center">
<tr>
<td>标题1</td>
<td>标题2</td>
<td align="center">操作</td>
</tr>
<tr>
<td>Test1</td>
<td>Test2</td>
<td><a href="#">修改</a> | <a href="#">删除</a></td>
</tr>
</table>
</div>
<!--5，弹出框：底部弹出样式2-->
<div id="forward" class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">回复</a>
</li>
<li class="mui-table-view-cell">
<a href="#">转发</a>
</li>
<li class="mui-table-view-cell">
<a href="#">打印</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#forward"><b>取消</b></a>
</li>
</ul>
</div>
<script>
function a(){
mui.toast('欢迎体验Hello MUI');
}
function b(){
mui.alert('欢迎体验Hello MUI', 'Hello MUI', function() {
});
}
function c(){
mui.prompt('欢迎体验Hello MUI', '请输入', '提示', new Array('取消', '确定'), function (Reason) {
if (Reason.index == 1) {
mui.toast('标记缺考成功');
}
});
}
</script>
</body>
</html>
![[VSCode] 自定义选中代码的高亮颜色[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)