首页 > 语言 > JavaScript > 正文

Jquery 实现弹出层插件

2024-05-06 14:46:44
字体:
来源:转载
供稿:网友

弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件。不多废话,直接开始吧!

1:遮罩层

 要弹出层,先要用一个遮罩层挡在下面的页面,此遮罩层是全屏的,页面滚动也要有,所以设置 position: fixed;还要有透明效果,下面是我定义的遮罩层css,取名mask

代码如下:
.mask
{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: white;
    overflow: scroll;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    z-index: 20;
    overflow: auto;
    top: 0px;
    right: 0px;
}

2:插件主要参数

tag:为什么需要tag?用tag可以指定需要弹出的隐藏元素,可以指定tag为选择器“#*”,这样可以弹出指定元素。这里我设置默认为this。

mainContent:这个参数是否需要?我觉得用处不大,我设置主要是为了对服务器控件,如果全部加在body,那就不能提交表单。但是submit点击后页面会刷新,弹出层消失,所以我觉得还是无用...

代码如下:
    $.fn.xsPop = function (options) {
        var defaults = {//默认值
            title: "弹出窗口", //窗口标题
            width: 500,
            heigth: 400,
            tag: this, //弹出需要加载的元素
            close: "关闭",
            mainContent: "body"//容器,为了可以提交表单,不过submit会刷新页面...
        };
        var options = $.extend(defaults, options); //以传参覆盖
        this.each(function () {
            xsMain(options.title, options.width, options.heigth, options.tag, options.close, options.mainContent); //插件的主入口
        });
    };

3:利用xsMain函数添加元素,并绑定事件

这里有个处理,就是控制高度和宽度如果设置超过了屏幕高宽度,就会适应屏幕,这样防止弹出层过大不能操作。其他的就是普通的添加html,本人用的string相加

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选