html 弹出层插件,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 divmask = "

$(mainContent).append(divmask);

var xsPop1 = "

";

var xsPop2 = " " + title + " " + close + "";

var xsPop3 = " 

 

";

var xsPop5 = "

";

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

});

});

好了差不多就这些了。本来还想做个边框拉动改变大小的，发现需要点时间，就先不做了。其实说实话，我觉得拖拽意义不大，边框控制大小意义也不大，因为我设置了溢出会出现滚动条。