jQuery弹出层插件_LayerModel弹出窗口遮罩效果插件源代码
2015-10-14 14:04:56  By: shinyuu

• shinyuu
• JQuery教程
• 1
• 7000
• 1

分享一个比较炫的jQuery弹出层插件、名字叫做LayerModel、本Demo是一款支持多种自定义效果的jQuery拖动弹出层特效、效果非常不错、同时整个插件也是轻量级的、整个插件加起来一共只有15kb左右、并带有比较详细的使用文档、比较适合大家在自己的网站上面使用、下面是运行效果

1、资源引入

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.layerModel.js"></script>
<link type="text/css" rel="stylesheet" href="layerModel.css"/>

2、需要先将HTML结构添加到页面中、然后设置其隐藏(display:none)（当然也可以直接通过js构建一个DIV出来）然后选中该dom元素调用layerModel方法、js代码如下

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

3、参数列表

参数	参数类型	默认参数	参数说明
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	是否点击弹出层外部空间可将其关闭。

最后给贴上Demo的源代码、希望对大家有用、有兴趣的哥们可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1o6y5Gim 密码: 4esc

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛