全自动遮罩层插件layer2.0版本发布(可传参),兼容IE7以上

来源:互联网 发布:库里季后赛数据 编辑:程序博客网 时间:2024/05/20 02:25

遮罩层是我们在网页中经常用到的一种功能,本人将其封装成了一个插件,以便更快捷方便的使用。

此插件原理很简单,首先生成一个遮罩背影,然后计算内容显示窗体所要距离浏览器上下的距离进行定位,当浏览器窗口大小发生变化后即时变动,且内容显示窗体不随滚动条滚动而滚动。

 

引用方法:

    <script src="PATH/js/jquery-1.11.3.min.js"></script>

    <script src="PATH/js/layer-2.0.js"></script>

    *注:请不要将自己的任何标签的id命名为layer,id为layer的标签是插件定义的遮罩层,同时z-index不要超过998。

 

基本设置:

    <div id="tips(id可以自定义,只要调用即可)" class="样式自定义">此处显示遮罩层内容显示窗体要展现的内容</div>

 

js调用:

    <script >

        //显示遮罩层

        $("#tips").layer();

        //关闭遮罩层

        $("#tips").hide();

        $("#layer").remove();

    < /script >

 

参数配置:

    {

        "bgColor" : "#000", //半透明的背景色

        "opacity" : 0.6, //半透明的透明度(输入0~1之间的小数)

        "layerHide" : false, //点击遮罩阴影是否隐藏,true 隐藏,false 不隐藏, 默认为false

        "fadeIn" : false //是否渐隐渐显,true 是, false 否, 默认为false

    }


插件下载地址:layer.2.0.js下载

0 0
原创粉丝点击