Jquery 實(shí)現(xiàn)彈出層插件

更新時(shí)間：2015年01月28日 10:58:40 投稿：hebedich

這篇文章主要介紹了Jquery 實(shí)現(xiàn)彈出層插件,包括遮罩層、插件參數(shù)、關(guān)閉動(dòng)作、拖拽效果等，需要的朋友可以參考下

彈出層的應(yīng)用還是比較多的，登陸，一些同頁面的操作，別人的總歸是別人的，自己的才是自己的，所以一直以來想寫個(gè)彈出層插件。不多廢話，直接開始吧！

1：遮罩層

要彈出層，先要用一個(gè)遮罩層擋在下面的頁面，此遮罩層是全屏的，頁面滾動(dòng)也要有，所以設(shè)置 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：插件主要參數(shù)

tag：為什么需要tag？用tag可以指定需要彈出的隱藏元素，可以指定tag為選擇器“#*”，這樣可以彈出指定元素。這里我設(shè)置默認(rèn)為this。

mainContent:這個(gè)參數(shù)是否需要？我覺得用處不大，我設(shè)置主要是為了對服務(wù)器控件，如果全部加在body，那就不能提交表單。但是submit點(diǎn)擊后頁面會刷新，彈出層消失，所以我覺得還是無用...

復(fù)制代碼代碼如下:

    $.fn.xsPop = function (options) {

        var defaults = {//默認(rèn)值

            title: "彈出窗口", //窗口標(biāo)題

            width: 500,

            heigth: 400,

            tag: this, //彈出需要加載的元素

            close: "關(guān)閉",

            mainContent: "body"http://容器,為了可以提交表單，不過submit會刷新頁面...

        };

        var options = $.extend(defaults, options); //以傳參覆蓋

        this.each(function () {

            xsMain(options.title, options.width, options.heigth, options.tag, options.close, options.mainContent); //插件的主入口

        });

    };

3：利用xsMain函數(shù)添加元素，并綁定事件

這里有個(gè)處理，就是控制高度和寬度如果設(shè)置超過了屏幕高寬度，就會適應(yīng)屏幕，這樣防止彈出層過大不能操作。其他的就是普通的添加html，本人用的string相加

復(fù)制代碼代碼如下:

//根據(jù)傳入數(shù)據(jù),添加遮罩層,彈出提示框

    function xsMain(title, width, height, tag, close, mainContent) {

        var divmask = "<div class=\"mask\"></div>";

        $(mainContent).append(divmask);

        var xsPop1 = " <div id=\"xsPop\" class=\"PopUp\"> <div class=\"PopHead\" id=\"xsPopHead\">";

        var xsPop2 = " <b>" + title + " </b><span id=\"xsColse\">" + close + "</span>";

        var xsPop3 = "  </div>  <div class=\"PopMain\" id=\"xsPopMain\">";

        var xsPop5 = "</div><span id=\"xytest\"></span> </div>";

        var allHtml = xsPop1 + xsPop2 + xsPop3 + xsPop5;

        $(mainContent).append(allHtml);

        $(tag).show();

        $(tag).appendTo("#xsPopMain");

        //得到瀏覽器的高度和寬度,進(jìn)行后面判斷(高度超過，拖動(dòng)邊框限制)

        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"); //綁定拖動(dòng)動(dòng)作

        $("#xsColse").bind("click", function () { ClosePop(tag, mainContent); }); //綁定關(guān)閉動(dòng)作

    }

　　4：關(guān)閉動(dòng)作

這里要先把tag給容器，不然后面remove時(shí)會一起remove，第二次彈出就找不到tag了。

復(fù)制代碼代碼如下:

 //關(guān)閉彈出層

    function ClosePop(tag, mainContent) {

        $(mainContent).append(tag); //保存，不然第四步的 $("#xsPop").remove()會把tag清空掉

        $(tag).hide();

        $(".mask").remove();

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

    }

5：拖拽效果

方法一：第一次找到的是利用元素的事件，但是很容易出現(xiàn)元素丟失問題，效果不太理想

復(fù)制代碼代碼如下:

    //彈出層的拖拽（失敗的方法，會出現(xiàn)對象丟失）

    //control 為拖拽的元素，tag為動(dòng)作的元素，一般control在tag內(nèi)

    //    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，但是還要有些許問題，移動(dòng)過快的問題，坐標(biāo)有小小的跳動(dòng)現(xiàn)象

　　我還發(fā)現(xiàn)一個(gè)問題，如果我手殘把彈出層直接拖到了屏幕上方的內(nèi)部，這時(shí)放手，呵呵，你永遠(yuǎn)也不能把它拖回來或點(diǎn)關(guān)閉了。我去看了下百度首頁的彈出層，他們也有這樣的現(xiàn)象，但是把窗口點(diǎn)放大縮小后彈出層會重新回到中心。我也試著這樣做，但是我綁定onresize會出現(xiàn)不能向最下面移動(dòng)，他們用的事件肯定不是onresize.所以我就直接判斷鼠標(biāo)位置不能小于0了。

復(fù)制代碼代碼如下:

 //彈出層的拖拽

    //control 為拖拽的元素，tag為動(dòng)作的元素，一般control在tag內(nèi)

    function xsdrag(control, tag) {

        $(control).mousedown(function (e)//e鼠標(biāo)事件  

        {

            var offset = $(this).offset(); //DIV在頁面的位置  

            var x = e.pageX - offset.left; //獲得鼠標(biāo)指針離DIV元素左邊界的距離  

            var y = e.pageY - offset.top; //獲得鼠標(biāo)指針離DIV元素上邊界的距離  

            $(document).bind("mousemove", function (ev)//綁定鼠標(biāo)的移動(dòng)事件，因?yàn)楣鈽?biāo)在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件  

            {

                if (ev.pageY <= 0) { return; }//防止邊框超過屏幕后無法關(guān)閉和拖動(dòng)

                $(tag).css({

                    'left': ev.pageX - x + $(tag).width() / 2, //本人的布局需要加這個(gè)

                    'top': ev.pageY - y + $(tag).height() / 2

                });

            });

        });

        $(document).mouseup(function () {

            $(this).unbind("mousemove");

        });

    }

6：樣式表

　　彈出層的布局使用的是top和left+margin-top負(fù)值，所以我的js里面有多加高度和寬度的一半

復(fù)制代碼代碼如下:

.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：頁面的使用

　　測試服務(wù)器控件可以提交表單

復(fù)制代碼代碼如下:

        $(document).ready(function () {

            $("#btnPop").click(function () {

                var options = {

                    title: "my pop",

                    width: 500,

                    heigth: 400,

                    close: "close",

                    mainContent: "form"

                }

                $("#pop1").xsPop(options);

            });

        });

好了差不多就這些了。本來還想做個(gè)邊框拉動(dòng)改變大小的，發(fā)現(xiàn)需要點(diǎn)時(shí)間，就先不做了。其實(shí)說實(shí)話，我覺得拖拽意義不大，邊框控制大小意義也不大，因?yàn)槲以O(shè)置了溢出會出現(xiàn)滾動(dòng)條。

您可能感興趣的文章: