/**
* 模态窗口
*/
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. fragment 学习

    fragment需要id是必须属性 <fragment        android:id="@+id/frg1"        android:name="com ...

  2. NSValue NSNumber NSData类

    NSValue NSNumber NSData类 步骤1 NSValue 我们先看看NSValue能做什么: 一个NSValue对象是用来存储一个C或者Objective-C数据的简单容器.它可以保存 ...

  3. 关于set或map的key使用自定义类型的问题

    我们都知道set或map的key使用自定义类型时必须重载<关系运算符 但是,还有一个条件,所调用重载的小于操作符,使用的对象必须是const 而对象调用的方法也必须是const的 1 #incl ...

  4. C#关于窗体的keysdown事件,无法获取到焦点

    当窗体中包含button之类的控件时,按下方向键时它们会自动获取焦点,导致窗体keysdown事件无法执行.解决方法很简单.将按钮之类控件放到panel容器中控件就无法获取焦点了.这时焦点会在整个窗体 ...

  5. The top 100 papers Nature explores the most-cited research of all time.

    The top 100 papers Nature explores the most-cited research of all time. The discovery of high-temper ...

  6. [转]Getting (personal) tasks from the user profile.

    from http://blog.amtopm.be/2013/02/22/getting-personal-tasks-from-the-user-profile/ Getting (persona ...

  7. codeforces D.Mashmokh and ACM

    题意:给你n和k,然后找出b1, b2, ..., bl(1 ≤ b1 ≤ b2 ≤ ... ≤ bl ≤ n),并且对所有的bi+1%bi==0,问有多少这样的序列? 思路:dp[i][j] 表示长 ...

  8. DELL 720XD和R820玩赏

  9. linux下so动态库一些不为人知的秘密(转)

    linux 下有动态库和静态库,动态库以.so为扩展名,静态库以.a为扩展名.二者都使用广泛.本文主要讲动态库方面知识.基本上每一个linux 程序都至少会有一个动态库,查看某个程序使用了那些动态库, ...

  10. java学习之二维数组

    java当中的二维数组,存储一组比较特殊的对象.他存储一个数组,同时存储的数组当中又存储着元素. java二维数组的声明方式一: class Arr2Demo { public static void ...