AmazeUI中模态框的实现方法

tangjin

作者

这篇文章给大家分享的是有关AmazeUI中模态框的实现方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

AmazeUI的模态框效果如下：

完全就如同某些手机浏览器对alert()的处理。其现实代码如下：

<!--使用HTML5开发-->
<!doctypehtml>
<htmlclass="no-js">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<!--自动适应移动屏幕-->
<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<!--优先使用webkit内核渲染-->
<metaname="renderer"content="webkit">
<!--不要被百度转码-->
<metahttp-equiv="Cache-Control"content="no-siteapp"/>
<!--以下才是引入amazeui资源-->
<linkrel="stylesheet"href="assets/css/amazeui.min.css">
<linkrel="stylesheet"href="assets/css/app.css">
<!--引入js的时候要注意，必须先引入jQuery，再引入amazeui，因为这个框架是基于jQuery开发的-->
<scriptsrc="assets/js/jquery.min.js"></script>
<scriptsrc="assets/js/amazeui.min.js"></script>
<title>Modal</title>
</head>
<body>
<buttonclass="am-btnam-btn-primary"&omicron;nclick="openModal()">打开模态框</button>

<divclass="am-modalam-modal-alert"tabindex="-1"id="my-alert">
<divclass="am-modal-dialog">
<divclass="am-modal-bd">
模态框的内容
</div>
<divclass="am-modal-footer">
<spanclass="am-modal-btn">关闭</span>
</div>
</div>
</div>
</body>
</html>
<script>
functionopenModal(){
$('#my-alert').modal();
}
</script>

注意到，这个id为my-alert的模态框，是通过button的onclick事件所触发的openModal()函数触发的。

其JS打开模态框的代码就一行，先获取了模态框的id之后，通过modal()方法打开。

感谢各位的阅读！关于“AmazeUI中模态框的实现方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

阅读全文

发布于 2021-03-21 22:36:22

amazeui