jQuery弹出层插件_LayerModel弹出窗口遮罩效果插件源代码
分享一个比较炫的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
下一篇: centos7 k8s搭建