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

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

jquery 弹出层


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的留言板)

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


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+