这是页面本来就存在的内容!
通过插件给它show出来!
没有遮罩层的弹出效果!
无法拖拽的弹出效果!
没有头部的弹出效果 关闭
有回调函数弹出效果!
初始化完成有回调函数!
定时关闭的弹出层
10秒后关闭弹出层!
自定义标题的弹出效果!
没有关闭按钮的弹出层 关闭
抖动的弹出层
自定义位置的弹出层
原始模样的弹出层,我本来就这么丑。。。关闭 随便找了一张图
点下面的链接可以自定义关闭层哦! 关闭
搞乱位置
点我修正位置
aaa
关闭
再弹出一个来 随便找了一张图
关闭
再弹出一个来 随便找了一张图
关闭
随便找了一张图
点我外部,可以将我关闭哦!

layerModel v1.0

演示与说明

by : zhoukun

弹出页面上存在的Dom元素

	$("#demo1").layerModel();
	

需要先将HTML结构添加到页面中,然后设置其隐藏(display:none),
然后选中该dom元素调用layerModel方法

运行

弹出html拼接的dom元素

	$("<div id='demo2'>这是拼接出来的
html元素!</div>").layerModel();

拼接的html至少有一个dom元素包住,直接的文字是不能调用layerModel方法的
如:<div>这是弹出层内容,外面要有一个div包裹住</div>

运行

弹出iframe

	$('<iframe width="600px" height="500px;"
scrolling="yes" src="http://www.baidu.com">
</iframe>').layerModel();

遮罩层

	$("#demo4").layerModel({
		locked : false
	});
	

locked:该参数为false时,将不显示遮罩层,没有遮罩层的情况下可以方便对页面继续进行操作。

运行

关闭拖拽

	$("#demo5").layerModel({
		drag : false
	});
	

drag:该参数为false时将关闭拖拽的功能。

运行

没有头部的弹出层

	$("#demo6").layerModel({"head":false});
	

设置head:false可以弹出不带头部的弹出效果

运行

弹出层初始化完成回调函数

	$("#demo0").layerModel({init:function(){
		alert("弹出层初始化完成!");
	}});
	

回调函数

$("#demo7").layerModel({
	close : function(){
		alert("你好,关闭回调事件");
		return true;
	}
});

close:设置弹出层关闭后执行的回调函数,必须返回true或false,返回true才会关闭。

运行

自动关闭的弹出层

	$("#demo8").layerModel({
		timer : 10000
	});
	

timer:设置弹出层自定关闭时间,如1*1000代表1秒。

运行

点击弹出层外部关闭弹出层

	$("#demo19").layerModel({
		blurClose : true
	});
	

blurClose:设置true泽点击弹出层外部可以将其关闭。

运行

自定义标题

	$("#demo9").layerModel({
		title : "你是我的小呀小苹果"
	});
	

title:自定义弹出层标题。

运行

没有关闭按钮

	$("#demo10").layerModel({
		isClose : false
	});
	

isClose:设置关闭按钮显示或隐藏

运行

设置弹出层抖动

	$("#demo11").layerModel({
		shake : true
	});
	

shake:设置弹出层抖动

运行

组合属性,自定义弹出层的位置

	$("#demo12").layerModel({
		center : false,
		fixed : false,
		top : 100,
		left : 100
	});
	

组合属性:自定义弹出层的位置

运行

维持原始模样的弹出层

	$("#demo13").layerModel({
		staySame : false
	});
	

staySame:是否维持原始模样,可能是平时用到的比较多的功能之一

运行

一个页面弹出多个互不影响的层

参数列表

参数 参数类型 默认参数 参数说明
center Boolean true

弹出层是否始终居中

浏览器大小改变居中

拖动滚动条居中

drag Boolean true

拖拽效果

true:启用拖拽效果。

false:禁用拖拽效果。

locked Boolean true

是否开启遮罩层

true:开启遮罩。

false:禁用遮罩。

zIndex number 9999

弹出层的层级大小

opacity number 0.5

背景遮罩透明度

0:为完全透明

1:未完全不透明

title string 系统提示

弹出层的标题

timer Number 0

定时关闭的时间,大于0才会有效

bgColor string #fffaf6

背景遮罩的颜色

width/height Number 0/0

设置弹出层的宽度和高度,单位为px,传参时无需带单位,建议少用,一般在样式中指定width最好。

close Function function(){return true}

设置关闭弹出层后执行的回调函数,只有返回false才不会关闭。

left/top Number 350/100

设置弹出层的位置,单位为px,传参时无需带单位,要想让其生效,必须设置fixed:false和center:false。如{"fixed":false,"center":false,"left":200,"top":100}

head Boolean true

是否显示头部title

isClose Boolean true

是否出现关闭按钮

shake Boolean false

是否出现抖动效果

staySame Boolean false

是否保持弹出元素原样,也就是没有插件自己装饰的头部和边框,元素本来啥样就弹出啥样。

init function null

初始化弹出层完成后的回调函数!

blurClose Boolean false

是否点击弹出层外部空间可将其关闭。

扩展方法或者小提示

方法名 使用说明
close

调用close方法可关闭弹出的层

如调用$("#aaa").layerModel()弹出了一个层

那么给弹出层内的某个元素绑定时间onclick="$('#aaa').close();"即可关闭这个层

点我演示下

fix

调用fix方法可手动修正弹出层的位置

如果通过js方法给弹出层追加了元素导致弹出层位置变了,那么调用fix方法可手动修正弹出层的位置

运行看看

适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

来源:站长素材