/**
* 模态窗口
*/
window.Modal = {
tpls:{
alert:'<div class="am-modal am-modal-alert" tabindex="-1"><div class="am-modal-dialog"><div class="am-modal-hd message-text"></div><div class="am-modal-footer"><span class="am-modal-btn">确定</span></div></div></div>',
confirm:'<div class="am-modal am-modal-confirm" tabindex="-1" ><div class="am-modal-dialog"><div class="am-modal-bd message-text"></div><div class="am-modal-footer"><span class="am-modal-btn btn-cancel" data-am-modal-cancel>取消</span><span class="am-modal-btn btn-confirm" data-am-modal-confirm>确定</span></div></div></div>',
loading:'<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1"><div class="am-modal-dialog"><div class="am-modal-hd message-text">正在载入...</div><div class="am-modal-bd"><span class="am-icon-spinner am-icon-spin"></span></div></div></div>'
},
register:function(events){
events = events || [];
if(events.length == 0){
events = ['alert', 'confirm', 'loading'];
}
var body = $(document.body);
this.modal = {};
for(var i=0; i<events.length; i++){
var event = events[i];
var tpl = this.tpls[event];
if(tpl){
this.modal[event] = $(tpl);
body.append(this.modal[event]);
}
}
},
alert:function(message, config){
config = config || {};
var confirmText = config.confirmText || "确定";
this.modal.alert.find(".am-modal-btn").text(confirmText);
this.modal.alert.find(".message-text").html(message);
this.modal.alert.modal("open");
},
confirm:function(message, config){
config = config || {};
var confirmText = config.confirmText || "确定";
var cancelText = config.cancelText || "取消";
this.modal.confirm.find(".btn-confirm").text(confirmText);
this.modal.confirm.find(".btn-cancel").text(cancelText);
this.modal.confirm.find(".message-text").html(message);
this.modal.confirm.modal(config).modal("open");
},
loading:function(message){
this.modal.loading.find(".message-text").html(message);
this.modal.loading.modal("open");
},
dismissLoading:function(){
this.modal.loading.find(".message-text").html("");
this.modal.loading.modal("close");
}
};
Modal.register();

AmazeUI 模态框封装的更多相关文章

  1. angularjs 给封装的模态框元素传值,和实现兄弟传值

    本例实现封装的元素所放的位置不同,而选择不同的传值,这里举例封装了bootstrap模态框,以后也方便大家去直接使用.方法举例如下:首先主页调用css/js有: <link rel=" ...

  2. bootstrap3-dialog:更强大、更灵活的模态框(封装好的模态框)

    用过bootstrap框架的同学们都知道,bootstrap自带的模态框用起来很不灵活,可谓鸡肋的很.但nakupanda开源作者封装了一个更强大.更灵活的模态框——bootstrap3-dialog ...

  3. amazeUI modal 模态框 关闭属性

    $('#my-prompt').modal({ relatedTarget: this, closeViaDimmer: false, // 点击外部空白处不关闭弹窗 closeOnConfirm:f ...

  4. jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)

    一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...

  5. fastadmin模态框(弹出框)

    用法: 在html页面新建一个按钮用来触发事件 <a href="javascript:;" class="btn btn-success btn-add &quo ...

  6. 每日质量NPM包模态框_react-modal

    一.react-modal 官方定义: Accessible modal dialog component for React.JS 理解: 一个容易使用的React模态框组件 二.用法 有时候我们不 ...

  7. 基于bootstrap模态框的alert弹窗

    完成的效果如下: html代码: <!-- 弹出框 --> <div class="modal fade" id="alert_like" t ...

  8. BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版

    如上就是很多后台管理系统的母版页布局. 左边一列模板.上面一列系统标识. 空白处充填子页面 以ASP.NET MVC为基础 引入bootstrap.js.bootstrap.css body: < ...

  9. ajax+json模态框中分页(spring+struts+mybatis+easyui分页插件)

    0.业务需求: 点击每个数字的时候可以显示每个对应的详细记录.也就是得点击11的时候拿着开采部与C级去查询.

随机推荐

  1. iOS工程适配64-bit经验分享

    终究还是来了.Apple下发了支持64位的最后通牒: As we announced in October, beginning February 1, 2015 new iOS apps submi ...

  2. 发送邮件(E-mail)方法整理合集

    在IOS开发中,有时候我们会需要用到邮件发送的功能.比如,接收用户反馈和程序崩溃通知等等.其实这个功能是很常用的,因为我目前就有发送邮件的开发需求,所以顺便整理下IOS发送邮件的方法. IOS原生自带 ...

  3. 模拟I2C从机

    模拟I2C主机的比较多,但是从机相对主机而言要难很多,这个供大家借鉴. 这个从机程序支持主机对它的随机写和随机读,连续读和连续写没做,有兴趣的可以完善下,呵呵. //Microcontrol CODE ...

  4. android如何获取默认的桌面程序

    [方法1] http://stackoverflow.com/questions/12594192/remove-activity-as-default-launcher/12594332#12594 ...

  5. 利用Java反射机制完成XML到对象的解析

    对于一些小批量的数据,如果采用数据库来存取的话,未免有点大题小作,使用XML文件是个不错的方法,尤其是在一些Web应用中,经常需要缓存一部分数据,如果将这些数据形成XML文件,解析后放入一个Hasht ...

  6. stat~~~访问文件状态的利器

    Name stat, fstat, lstat - get file status Synopsis #include <sys/types.h>#include <sys/stat ...

  7. (转载)php数组添加、删除元素的方法

    (转载)http://www.phpgs.com/html/php/phpjichu/20120130440.html 带来一篇php 数组 添加元素.删除元素的方法的文章,有需要的php学习者参考下 ...

  8. Nodejs in Visual Studio Code 09.企业网与CNPM

    1.开始 CNPM : https://npm.taobao.org/ 2.企业网HTTP代理上网 平时办公在一个大企业网(10.*.*.*)中,使用HTTP代理上网,发现npm命令无法执行. 解决方 ...

  9. 通过web修改svn用户密码

    使用方法: 将文件changePasswd.cgi和changePasswd.ini 放到apche安装目录下的cgi-bin下(cgi-bin的目录可以通过/etc/httpd/conf/httpd ...

  10. 6种GET和POST请求发送方法

    我试过了畅言和多说两种社会化评论框,后来还是抛弃了畅言,不安全. 无论是畅言还是多说,我都需要从远程抓取文章的评论数,然后存入本地数据库.对于多说,请求的格式如下: // 获取评论次数,参数是文章ID ...