【AmazeUI】模态框

本文与《【Ratchet】模态框》（点击打开链接）为姊妹篇，相比之下，AmazeUI的模态框，更加接近于一个alert()，不适合承载过多的内容，但是其优点就是可以通过JS操控，Ratchet仅能通过超级链接a标签打开。

AmazeUI的模态框效果如下：

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

<!--使用HTML5开发-->
<!doctype html>
<html class="no-js">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--自动适应移动屏幕--><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><!--优先使用webkit内核渲染--><meta name="renderer" content="webkit"><!--不要被百度转码--><meta http-equiv="Cache-Control" content="no-siteapp"/><!--以下才是引入amazeui资源--><link rel="stylesheet" href="assets/css/amazeui.min.css"><link rel="stylesheet" href="assets/css/app.css"><!--引入js的时候要注意，必须先引入jQuery，再引入amazeui，因为这个框架是基于jQuery开发的--><script src="assets/js/jquery.min.js"></script><script src="assets/js/amazeui.min.js"></script><title>Modal</title></head>    <body><button class="am-btn am-btn-primary" οnclick="openModal()">打开模态框</button><div class="am-modal am-modal-alert" tabindex="-1" id="my-alert"><div class="am-modal-dialog"><div class="am-modal-bd">模态框的内容</div><div class="am-modal-footer"><span class="am-modal-btn">关闭</span></div></div></div></body>
</html>
<script>
function openModal(){$('#my-alert').modal();
}
</script>

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

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

【AmazeUI】模态框相关推荐

bootstrap模态框显示控制
默认模态框弹出后,点击背景蒙层部分弹框会消失,如要解决,需要在模态框属性中加 aria-hidden="true" data-backdrop="static" ...
BootStrap 模态框禁用空白处点击关闭
转自(http://www.cnblogs.com/DayDreamEveryWhere/p/4550320.html) 模态框为信息编辑窗口,涉及好多内容,填了半天,若一不小心点了空白处..... ...
28 模态框拖动案例
1.模态框拖拽案例模态框也称为弹出框. 功能需求: 点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层鼠标放到模态框最上面一层,可以按 ...
html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
Bootstrap模态框使用WebUploader点击失效问题解决
Bootstrap模态框使用WebUploader点击失效问题解决参考文章: (1)Bootstrap模态框使用WebUploader点击失效问题解决 (2)https://www.cnblogs. ...
js实现模态框点击空白关闭
面试的时候被问到了,这个问题我在网上一直没搜索到.不过bootstrap已经实现了. 在学习js事件委托的时候.想到可以解决这个问题. 在document添加点击监听,利用事件的捕获和冒泡,界面上的点 ...
模态框之Uncaught Error: Syntax error, unrecognized expression:
网页源码: <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3. ...
模态框在IE下的问题，即position:fixed在IE下不兼容的处理方式
项目中遇到的问题,模态框在IE下总出现如图所示双层遮罩框,经排查发现是由于bootstrap里写的modal的样式里position:fixed不兼容IE的原因,导致铺不满整个窗口. 解决方案:在项目 ...
html单击按钮时弹出输入框,点击按钮弹出模态框的一系列操作代码实例
实现功能提交按钮功能: 点击提交按钮的时候都会弹出模态框,但是有不同的状态: 审核状态未通过:弹出未通过理由的input输入框,模态框中除了取消和确定按钮,新增确定并保存医院的按钮审核状态已通过: ...

【AmazeUI】模态框

【AmazeUI】模态框相关推荐

最新文章

热门文章