彈出層的應用還是比較多的，登陸，一些同頁面的操作，別人的總歸是別人的，自己的才是自己的，所以一直以來想寫個彈出層插件。不多廢話，直接開始吧！
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 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: 系統;
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);
});
});
好了差不多就這些了。本來還想做個邊框拉動改變大小的，發現需要點時間，就先不做了。其實說實話，我覺得拖曳意義不大，邊框控制大小意義也不大，因為我設定了溢出會出現捲軸。
