$("#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方法可手动修正弹出层的位置 |
适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
来源:站长素材