Jquery 實現彈出層外掛程式

來源:互聯網
上載者:User

彈出層的應用還是比較多的,登陸,一些同頁面的操作,別人的總歸是別人的,自己的才是自己的,所以一直以來想寫個彈出層外掛程式。不多廢話,直接開始吧!

不想看可以在這裡直接下載源碼xsPop.zip

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 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");

        //得到瀏覽器的高度和寬度,進行後面判斷(高度超過,拖動邊框限制)
        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);
               
            });
        });
 

8:源碼下載

下載地址:xsPop.zip



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。