弹层组件

依赖

  1. modal.css
  2. zepto.js
  3. modal.js
  4. loading.gif laoding弹层
  5. loader.gif 查看图片

属性&方法

属性/方法 类型 默认值 描述
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:

				http://static.cnbetacdn.com/article/2015/0324/b1d241d7cfb0359ad451000d2dd580a4.jpg_100x100.jpg

参考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:'警告提示'
				});

全屏loading模式

JS:

				new Modal({
					model:'loading'
				});