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

Jquery编程开发中该如何实现弹出层插件

程序员文章站 2023-10-10 16:13:28
jquery开发中该如何实现弹出层插件,弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件。不多废话,直接开始吧!...

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

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相加

代码如下:


//根据传入数据,添加遮罩层,弹出提示框
    function xsmain(title, width, height, tag, close, maincontent) {
        var pmask = "<p class=\"mask\"></p>";
        $(maincontent).append(pmask);
        var xspop1 = " <p id=\"xspop\" class=\"popup\"> <p class=\"pophead\" id=\"xspophead\">";
        var xspop2 = " <b>" + title + " </b><span id=\"xscolse\">" + close + "</span>";
        var xspop3 = "  </p>  <p class=\"popmain\" id=\"xspopmain\">";
        var xspop5 = "</p><span id=\"xytest\"></span> </p>";
        var allhtml = xspop1 + xspop2 + xspop3 + xspop5;
        $(maincontent).append(allhtml);
        $(tag).show();
        $(tag).appendto("#xspopmain");
        //得到的高度和宽度,进行后面判断(高度超过,拖动边框限制)
        clientheight = window.screen.height;
        clientwidth = window.screen.width;
        if (height > clientheight) {
            height = clientheight - 100;
        }
        if (width > clientwidth) {
            width = clientwidth - 100;
        }
        $("#xspop").css({
            "heigth": height + "px",
            "width": width + "px",
            "margin-top": "-" + (height / 2) + "px",
            "margin-left": "-" + (width / 2) + "px"
        });
        $("#xspopmain").css("height", height - $("#xspophead").height());
        xsdrag("#xspophead", "#xspop"); //绑定拖动动作
        $("#xscolse").bind("click", function () { closepop(tag, maincontent); }); //绑定关闭动作
    }

  4:关闭动作

这里要先把tag给容器,不然后面remove时会一起remove,第二次弹出就找不到tag了。

代码如下:


 //关闭弹出层
    function closepop(tag, maincontent) {
        $(maincontent).append(tag); //保存,不然第四步的 $("#xspop").remove()会把tag清空掉
        $(tag).hide();
        $(".mask").remove();
        $("#xspop").remove();
    }

5:拖拽效果

方法一:第一次找到的是利用元素的事件,但是很容易出现元素丢失问题,效果不太理想

代码如下:


    //弹出层的拖拽(失败的方法,会出现对象丢失)
    //control 为拖拽的元素,tag为动作的元素,一般control在tag内
    //    function drag(control, tag) {
    //        var ismove = false;
    //        var abs_x = 0, abs_y = 0;
    //        $(control).mousedown(
    //            function (event) {
    //                var top = $(tag).offset().top;
    //                var left = $(tag).offset().left;
    //                abs_x = event.pagex - left;
    //                abs_y = event.pagey - top;
    //                ismove = true;
    //            }).mouseleave(function () {
    //                ismove = false;
    //            });
    //        $(control).mouseup(function () {
    //            ismove = false;
    //        });
    //        $(document).mousemove(function (event) {
    //            if (ismove) {
    //                $(tag).css({
    //                    'left': event.pagex - abs_x + $(tag).width() / 2 - 1,
    //                    'top': event.pagey - abs_y + $(tag).height() / 2 - 1
    //                });
    //            }
    //            return false;
    //        });
    //    }

方法二,本人目前采用的方法,利用document的down和up,但是还要有些许问题,移动过快的问题,坐标有小小的跳动现象

  我还发现一个问题,如果我手残把弹出层直接拖到了屏幕上方的内部,这时放手,呵呵,你永远也不能把它拖回来或点关闭了。我去看了下百度首页的弹出层,他们也有这样的现象,但是把窗口点放大缩小后弹出层会重新回到中心。我也试着这样做,但是我绑定onresize会出现不能向最下面移动,他们用的事件肯定不是onresize.所以我就直接判断鼠标位置不能小于0了。

代码如下:


 //弹出层的拖拽
    //control 为拖拽的元素,tag为动作的元素,一般control在tag内
    function xsdrag(control, tag) {
        $(control).mousedown(function (e)//e鼠标事件 
        {
            var offset = $(this).offset(); //div在页面的位置 
            var x = e.pagex - offset.left; //获得鼠标指针离div元素左边界的距离 
            var y = e.pagey - offset.top; //获得鼠标指针离div元素上边界的距离 
            $(document).bind("mousemove", function (ev)//绑定鼠标的移动事件,因为光标在div元素外面也要有效果,所以要用doucment的事件,而不用div元素的事件 
            {
                if (ev.pagey <= 0) { return; }//防止边框超过屏幕后无法关闭和拖动
                $(tag).css({
                    'left': ev.pagex - x + $(tag).width() / 2, //本人的布局需要加这个
                    'top': ev.pagey - y + $(tag).height() / 2
                });
            });
        });
        $(document).mouseup(function () {
            $(this).unbind("mousemove");
        });
    }

6:样式表

  弹出层的布局使用的是top和left+margin-top负值,所以我的js里面有多加高度和宽度的一半

代码如下:


.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;
}
.popup
{
    padding: 0px;
    position: absolute;
    z-index: 21 !important;
    background-color: white;
    border-style: solid solid solid solid;
    border-width: 1px;
    border-color: #c0c0c0;
    left: 50%;
    top: 50%;
}
.pophead
{
    background-color: #f0f0f0;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #c0c0c0;
    height: 30px;
    cursor: move;
    clip: rect(0px, auto, auto, 0px);
}
.pophead b
{
    float: left;
    display: block;
    color: #c0c0c0;
    font-family: system;
    font-size: medium;
    line-height: 30px;
    text-indent: 2em;
}
.pophead span
{
    float: right;
    display: block;
    text-align: right;
    line-height: 30px;
    cursor: pointer;
    text-indent: 5px;
    color: #ff0000;
    font-size: 12pt;
}
.popmain
{
    padding: 10px;
    overflow: auto;
}

7:页面的使用

  测试服务器控件可以提交表单

代码如下:


        $(document).ready(function () {
            $("#btnpop").click(function () {
                var options = {
                    title: "my pop",
                    width: 500,
                    heigth: 400,
                    close: "close",
                    maincontent: "form"
                }
                $("#pop1").xspop(options);
            });
        });