弹出层的应用还是比较多的，登陆，一些同页面的操作，别人的总归是别人的，自己的才是自己的，所以一直以来想写个弹出层插件。不多废话，直接开始吧！
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了。
复制代码 代码如下: