amazeui modal处理

平常处理

// 打开modal框
$("#deliverTaskInfo-modal").modal({relatedTarget: this,closeViaDimmer: false,closeOnConfirm: false});

打开和关闭回调方法

// 打开modal框
var orderModalView;
mainJs = this;
function showOrderModalFunc(orderId, platOrderNo){//这里如果不判断有问题,会导致同时存在多个modalif(!orderModalView){console.info("new");orderModalView = $("#deliver-orderInfo-modal");//监听modal弹出,弹出的时候调用接口orderModalView.on('open.modal.amui', function(){// 将其他MODAL弹出框隐藏$(".am-modal").addClass("am-hide");orderModalView.removeClass("am-hide");console.info("打开");});orderModalView.on('close.modal.amui', function(){// 恢复之前隐藏的弹出框$(".am-modal").removeClass("am-hide");console.info("关闭");});}orderModalView.modal('open');
}

http://amazeui.clouddeep.cn/1.x/javascript/modal/

loading modal

在html里面要加入下面模块(cockpit项目是在jsp/common下面 common-modal-loading.jsp)

<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="cockpit-modal-loading"><div class="am-modal-dialog"><div class="am-modal-hd">正在载入...</div><div class="am-modal-bd"><span class="am-icon-spinner am-icon-spin"></span></div></div>
</div>

在js中调用

$("#common-modal-loading").modal('open');

amazeui modal处理相关推荐

amazeui学习笔记二（进阶开发4）--JavaScript规范Rules
amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...
弹出页面，弹出框，$(‘‘).modal({}）；模态框
效果图: 自己可以添加内容: 引用:amazeui前端框架: <link rel="stylesheet" href="/tc_vsmp/view/assets/c ...
【AmazeUI】AmazeUI的确定框与确定框的致命缺陷
在AmazeUI这个手机前端框架可以通过以下的脚本: function calculate(){ $('#confirm1').modal({}); } 来触发在HTML已经如下布局的确定框: < ...
【AmazeUI】模态框
本文与<[Ratchet]模态框>(点击打开链接)为姊妹篇,相比之下,AmazeUI的模态框,更加接近于一个alert(),不适合承载过多的内容,但是其优点就是可以通过JS操控,Ratch ...
amazeui学习笔记一（开始使用3）--兼容性列表compatibility
amazeui学习笔记一(开始使用3)--兼容性列表compatibility 一.总结 1.不要用ie做前端测试,不要碰ie,尽量用google 浏览器: 按照微软官方的说法,IE 开发者工具中的浏 ...
bootstrap modal 弹出效果
window.showMsg = function (msg) {//显示悬浮窗$("#autoCloseModal").modal("show")//设置文本 ...
Bootstrap：关于bootstrap单页面中多Modal的问题
2019独角兽企业重金招聘Python工程师标准>>> 在单页面中新建用户采用modal而判断添加成功后还采用modal提示成功后右边的滚动条会出来俩条,覆盖整个body的阴影瞬间变 ...
amazeui学习笔记--css（常用组件4）--关闭按钮Close
amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...
amazeui页面分析之登录页面
amazeui页面分析之登录页面一.总结 1.tpl命名空间:tpl命名空间的样式都是从app.css里面来的,app.css用用来移动网站开发的样式 2.表单样式:am-form到am-form- ...

amazeui modal处理

平常处理

打开和关闭回调方法

loading modal

amazeui modal处理相关推荐

最新文章

热门文章