弹出层的应用还是比较多的，登陆，一些同页面的操作，别人的总归是别人的，自己的才是自己的，所以一直以来想写个弹出层插件。不多废话，直接开始吧！
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 $(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);
});
});
好了差不多就这些了。本来还想做个边框拉动改变大小的，发现需要点时间，就先不做了。其实说实话，我觉得拖拽意义不大，边框控制大小意义也不大，因为我设置了溢出会出现滚动条。