弹出框插件
本插件ccShow是用来在前端显示弹出框，用户可以点击按钮，弹出一个框，也可以Ajax请求时，弹出提示语，请求中，等Ajax结束后，就显示已完成或者请求失败等情况。基于jQuery的插件，兼容各种浏览器。
var ccShow = {};
var isSetTimeOut=false;
var isShow = false,
showType = "";
ccShow.showMsg = function (rb, type, willHide,callback,showTime) { //此方法，显示提示语，一般用于Ajax请求时，弹出提示语
//rb是你要显示的内容，type是代表你显示的内容是成功还是失败，成功就是green的底色，失败就是red的底色，willHide代表弹出框是否会显示几秒后消失，callback代表你点击弹出框时，调用的方法，showTime代表弹出框显示多少毫秒。
var isHide = willHide == false ? false : true; //willHide为true，isHide为true，代表将会隐藏，
var showTime = showTime || 3000; //默认显示3秒
var p = this;
type = type || "success"; //默认是成功类型，也就是底色是绿色
if (!isShow) { //一个页面只能出现一个tip，所以需要用一个全局变量来操作，第一次调用时，isShow为false，进入if语句
var tips = $("#tips", top.document); //取最外面的window对象的document中的tips元素。（此元素就是弹出框容器）
showType = type;
tips.attr("class", ""); //先把class清空
switch (type) {
case "load":
tips.addClass("msgBoxdiv msg-orange"); //加载中的底色是黄色
break;
case "fail":
tips.addClass("msgBoxdiv msg-red");
break;
default:
tips.addClass("msgBoxdiv msg-green");
}
tips.find('span').html(rb); //把要显示的内容赋给tips元素中
tips.show(); //显示tips
isShow=true; //标志tips正在显示，如果这时，再次调用showMsg方法，将不会做任何处理
if(typeof(callback)=="function"){ //如果有回调方法，就绑定tips，当用户点击tips时，调用这个回调方法，同时隐藏这个弹出框tips
$("#tips").find("a").bind("click",function(){
callback();
p.hideMsg();
});
}
if (isHide && type != 'load') { //如果需要隐藏，并且type不能是load，因为load就代表加载中，不可能会消失
function _hideMsg(){
p.hideMsg();
}
window.clearTimeout(isSetTimeOut);
isSetTimeOut = window.setTimeout(_hideMsg, showTime);
}
}
};
/*
隐藏加载提示信息
*/
ccShow.hideMsg= function (type) {
if(showType != "load"){
$("#tips", parent.document).hide(); //如果显示的类型不是加载中，就隐藏tips，并且设置isShow为false
isShow = false;
}
};
/*
显示遮罩层
*/
function showOpactity() {
if ($("#shareLayer", parent.document).length > 0) { //如果已经创建过这个遮罩层，直接显示就行
$("#shareLayer", parent.document).show();
}
else {
var opactity = document.createElement("div");
opactity.id = "shareLayer";
opactity.style.zIndex = 999;
opactity.className = "shareLayer"; //遮罩层的显示主要在这个css类中
top.document.body.appendChild(opactity);
}
};
/*
隐藏遮罩层
*/
function hideOpactity() {
$("#shareLayer", parent.document).hide();
};
/*
显示一个提示信息。alert形式
*/
ccShow.alert = function (rb, wo, title) {
//rb代表要提示的内容,wo代表按确定按钮后的回调函数,text代表弹出框的标题
var ao = {
id: 'alert',
title: title || "弹出框",
type: 'text',
text: '<div class="pmt_div"><p class="col_grey pt_10">' + rb + '</p> <i class="i-pmt"></i></div>',
zindex: 99999,
buttons: [
{
text: "ok",
clickEvent: wo
}
],
dragStyle: 1
};
msgBox(ao);
};
/*
显示一个弹出Div
Json 数据格式定义如下：
var ao = {
id:"example",
title:"exampleTitle",
text:"测试",
buttons:[{
text:"确定,"
clickEven:functin(){},
isCancelBtn:false
}]
};
*/
function msgBox(ao) {
ao = ao || {};
var id = ao.id || "";
var divDialogId = "divDialog" + id;
if ($("#divDialogId").length > 0) { //id相同时，就代表此弹出已经在显示了，就不做任何处理
return;
}
var divDialogCloseId = "divDialogClose" + id;
var title = ao.title; //弹出框标题
var text = ao.text; //弹出框内容
var btns = ao.buttons; //弹出框按钮数组
var zindex = ao.zindex || 99999;
var type = ao.type || 'div';
showOpactity(); //显示遮罩层
var objDivDialog = document.createElement("div");
objDivDialog.id = divDialogId;
top.document.body.appendChild(objDivDialog);
objDivDialog.style.zIndex = zindex; //显示弹出框，因为弹出框的z-index大于遮罩层的z-index值，因此会显示在遮罩层上面
objDivDialog.className = "pop";
var html = [];
html[html.length] = '<h2 class="pop_hd" id="pop_drag">' + title + '<a class="pop-cls i-wcls" href="javascript:;" id="' + divDialogCloseId + '"></a></h2>'; //标题
html[html.length] = '<div class="pop_bd" style="min-height:80px" id="btnAlert' + id + '" tabindex="1">';
html[html.length] = ao.text; //内容
if (btns && btns.length > 0) {
html[html.length] = '<div class="pop_bdiv ta_r">';
for (var i = 0; i < btns.length; i++) { //如果有buttons属性，就循环这个数组
var btnText = btns[i].text;
var btnClass = "p_btn_on";
if (btns.length != 1 && i == btns.length - 1) //当有2个以及以上选项时，最后一项的class为p_btn
btnClass = "p_btn";
html[html.length] = '<a class=" + btnClass + " index="' + i + '" href="javascript:;">' + btnText + '</a>'; //显示这个数组中的每一项
}
html[html.length] = '</div>';
}
html[html.length] = '</div>';
objDivDialog.innerHTML = html.join("");
var width = ao.width || 425; //弹出框的默认宽度为425
objDivDialog.style.width = width + "px";
(function (wrap) {
var $window = $(parent.window),
$document = $(parent.document),
dl = $document.scrollLeft(),
dt = $document.scrollTop(),
ww = $window.width(),
wh = $window.height(),
ow = wrap.offsetWidth,
oh = wrap.offsetHeight,
left = (ww - ow) / 2 + dl, //窗口宽度-弹出框的宽度，再除以2，弹出框就会显示在窗口中间，但是页面可能有滚动条，这时弹出框的left需要加上滚动的距离才会显示在窗口的中间
top = (wh - oh) * 382 / 1000 + dt, // 黄金比例，没有除以2，除以了2.61
style = wrap.style;
style.left = Math.max(parseInt(left), dl) + 'px'; //设置弹出框的横向位置，当窗口小于弹出框时，就使用滚动的位置，也就是在窗口的left:0,top:0显示
style.top = Math.max(parseInt(top), dt) + 'px'; //设置弹出框的纵向位置
})(objDivDialog);
//绑定拖拽事件，弹出框可以拖动
drag( $("#pop_drag"), $(objDivDialog), 9998, true );
// 第一个参数代表可拖拽区域，也就是弹出框的那个区域可以通过mousedown拖动弹出框，并不是点击弹出框的任何位置就可以进行拖动的。
// 第二个参数代表需要拖拽的弹出框
// 第三个参数设置拖拽框的z-index值
$("#" + divDialogCloseId, parent.document).bind("click", function () { //如果点击关闭按钮
var r = true;
if (typeof(ao.sysCloseEvent) == "function") { //先判断是否传入了关闭的回调方法
r = ao.sysCloseEvent();
if(r!=false){r = true;}//为了兼容回调函数没有返回值
}
if (r) {
objDivDialog.parentNode.removeChild(objDivDialog);
hideOpactity();
return false;
}
});
$("#btnAlert" + id, parent.document).bind("click", function (event) { //给按钮选项绑定click事件
var target = event.target;
if (target.tagName == "A" && target.getAttribute("index")) {
var index = parseInt(target.getAttribute("index"));
var r = true;
if (typeof(btns[index].clickEvent) == "function") {
r = btns[index].clickEvent(); //如果按钮选项的回调方法返回false，将不会关闭弹出框。如果返回true，将会移除弹出框，并且隐藏遮罩层
if(r!=false){r = true;}//为了兼容回调函数没有返回值
}
if (r) {
objDivDialog.parentNode.removeChild(objDivDialog);
hideOpactity();
return false;
}
}
});
$("#btnAlert" + id, parent.document).focus();
return $(objDivDialog);
};
/*
dragElement: 可拖拽区域
wrap: 需要拖拽的弹出框
zIndex: 设置拖拽框的z-index值
*/
function drag( dragElement, wrap, zIndex, limitRange ){
var d = document,
dd = document.documentElement,
db = document.body,
//获取当前视口高度和宽度
cHeight = Math.max( dd.clientHeight, db.clientHeight ),
cWidth = Math.max( dd.clientWidth, db.clientWidth ),
//获取弹出框高度和宽度
wrapWidth = wrap.width();
wrapHeight = wrap.height();
win = window;
dragElement.bind("mousedown", function(e){ //可拖动区域绑定mousedown事件
var ev = e || event,
x = ev.clientX, //鼠标点击的位置
y = ev.clientY,
os = wrap.offset(), //相对于视口的偏移，position()获得父元素的偏移
disX = x - os.left,
disY = y - os.top;
wrap.css({ position: "absolute"}); //只有绝对定位，才能进行拖动
if(zIndex){
wrap.css({ zIndex: ++zIndex });
}
if(wrap[0].setCapture){ //针对IE浏览器。这段代码其实不影响拖动效果。之所以加这段是为了处理特殊情况，比如：当你在A页面触发mousedown，并且进行拖动时，突然弹出一个页面B，页面B覆盖了A，于是你的鼠标会在页面B上（这时你不松手，鼠标只是在页面B上，还没有focus）。这种情况下，如果你不写这段代码，将会出现A页面的mouseup没有触发，引起程序出错。但是你写了这段代码，就意味着，即便鼠标跳到了页面B上，鼠标的事件，页面A也能监听（这时页面B还没有获得鼠标focus）。当你在页面B上松开鼠标触发mouseup事件，页面A将会监听到，于是取消掉这个功能。这时鼠标在页面B的操作就不会影响到页面A了，页面A的拖动效果也能正常结束。
wrap[0].setCapture();
}else if(win.captureEvents){ //针对火狐浏览器
win.captureEvents(ev.MOUSEMOVE|ev.MOUSEUP );
}
//这段代码的意思是，IE：元素wrap[0]捕获窗口内所有的鼠标事件。火狐：捕获窗口内所有的鼠标move和鼠标up事件。这段代码，很偏门，可以不用理解，知道是怎么回事就行，不写也没错的。
d.onmousemove = function(e){ //给document绑定mousemove事件
var ev = e || event,
size = {};
size.l = ev.clientX - disX; //鼠标移动的位置，减去的是mousedown时，鼠标与拖动框位置的偏移
size.h = ev.clientY - disY;
if(limitRange){ //是否有传入true，如果有，就需要调用限制区域的私有函数，此私有函数，是限制拖动的范围的。不传，或传入false，将不会限制
limitRange( size );
}
wrap[0].style.left = size.l + "px";
wrap[0].style.top = size.h + "px";
}
d.onmouseup = function(){
if(wrap[0].releaseCapture){ //释放捕获
wrap[0].releaseCapture();
}else if(win.captureEvents){
win.releaseEvents(ev.MOUSEMOVE|ev.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
}
return false;
});
function limitRange( size ){ //不能把弹出框拖动到可视区之外。
var l = size.l,
h = size.h;
if( l < 0 ){
size.l = 0;
}else if( l > cWidth - wrapWidth ){
size.l = cWidth - wrapWidth;
}
if( h < 0 ){
size.h = 0;
}else if( h > cHeight - wrapHeight ){
size.h = cHeight - wrapHeight;
}
}
};
/*
显示一个确认窗口。Confirm形式.
rb 提示的内容.
wo 确定按钮的回调函数.
title 标题
cancelCallbak 取消按钮回调函数
addId 额外的id字符串
*/
ccShow .confirm=function (rb, wo, title, cancelCallbak, addId) {
var ao = {
id: 'confirm' + (addId || ""),
title: title || "确认",
type: 'text',
text: '<div class="pmt_div"><p class="col_grey pt_10">' + rb + '</p> <i class="i-pmt"></i></div>',
zindex: 99999,
buttons: [
{
text: "ok",
clickEvent: wo
},
{
text: "cancel",
clickEvent: cancelCallbak
}
]
};
msgBox(ao);
};
//显示默认弹出框
ccShow.showMsgBox = function(ao){
return msgBox(ao);
};
/*
关闭弹出的Div
ids代表打开的div对象的id
*/
ccShow.closeMsgBox = function (ids) {
var id = ids || "";
$("#divDialogClose" + id).click();
}
使用该插件，只需要调用 ccShow对象的各种方法就行了。
加油！
