$("#demo1").layerModel();
需要先将HTML结构添加到页面中,然后设置其隐藏(display:none),
然后选中该dom元素调用layerModel方法
$("<div id='demo2'>这是拼接出来的
html元素!</div>").layerModel();
拼接的html至少有一个dom元素包住,直接的文字是不能调用layerModel方法的
如:<div>这是弹出层内容,外面要有一个div包裹住</div>
$('<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方法可手动修正弹出层的位置 |