欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  技术分享

jQuery弹出层插件_LayerModel弹出窗口遮罩效果插件源代码

程序员文章站 2022-03-01 13:01:38
...

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

jQuery弹出层插件_LayerModel弹出窗口遮罩效果插件源代码


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