- modal.css
- zepto.js
- modal.js
- loading.gif laoding弹层
- loader.gif 查看图片
- 返回键关闭弹层beta
- 模拟弹框模式
- 提示模式
- 全屏loading模式
属性/方法 | 类型 | 默认值 | 描述 |
---|---|---|---|
model | string | dialog | dialog,popup,img,loading四个模式 |
title | string | 空 | model为dialog时,title才有效。为空时,不显示弹框标题。 |
content | string | 空 | dialog的主题内容 |
type | string | info | 当model为popup时,的样式。有info、success、warning、danger。颜色分辨为蓝色,绿色,黄色,红色 |
okText | string | 确定 | 确定按钮的文字 |
cancelText | string | 取消 | 取消按钮的文本 |
ok | boolean/function | false | 确定按钮的回调函数。falsh时,不显示确定按钮。 |
cancel | boolean/function | false | 取消按钮的回调函数。falsh时,不显示取消按钮。 |
init | function | function(){} | 初始化的回调函数 |
auto | boolean | true | 是否初始化时,打开弹层 |
close | function | false | 关闭弹层时的,回调函数 |
time | int | 3000 | 单位毫秒,自动关闭popup的时间 |
src | string | 空 | 全屏显示图片的地址 |
js:
new Modal({ title:'我是标题', //false时,没有标题 content:'我是内容', //必填 okText:'好的', //默认“确定” cancelText:'不要', //默认"取消" ok: function(){ //false时,没有ok按钮 alert('ok'); }, cancel: function(){ //false时,没有cancel按钮 alert('cancel'); }, close: function(){ alert('我被关闭了!!!'); } });
js:
new Modal({ content:'简单弹层', ok: function(){} });
点击下面图片,预览效果
参考html:
参考JS:
$('#imgdemo').click(function(){ new Modal({ model:'img', src: $(this).data('src') }); });
new Modal({ model:'popup', type:'info', content:'普通提示info', time:4000//默认3000自动关闭 });
new Modal({ model:'popup', type:'success', content:'成功提示success' });
new Modal({ model:'popup', type:'danger', content:'错误提示danger' });
new Modal({ model:'popup', type:'warning', content:'警告提示' });
JS:
new Modal({ model:'loading' });