自己封装了一个JS的弹出框。
提供的只是一个思想和原理，功能不够完善，当然有需要的话可以逐步添加功能。测试过IE6,7,8和FF和谷歌。
页面调用的时候很简单：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
</head>
<style>
a{text-decoration:none}
#content{border:1px solid #267AC2;border-top:none}
#contentTitle{background:url(images/tipbg.jpg) repeat-x;height:28px;}
#contentBody{font-size:12px;text-align:center;position:relative}
.contentConfirm{position:absolute;right:5px;bottom:10px}
.contentConfirm a{background:url(images/ok_button.jpg);width:60px;height:23px;display:block;line-height:23px;float:left;margin-right:10px}
</style>
<body>
<script src="demo.js"></script>
<script>
//CSS可以自己定义，传入ID
var a =new _Alert({
_width : 500,
_height : 200,
_isdrag : true,
_id : "content",
_html : "测试的<strong>内容</strong>",
_type : "Confirm"
});
</script>
</body>
</html>
View Code
//JS弹出框
Jade = {};
Jade.util = {
addEvent: function (target, eventType, eventHandle) {
if (! +"\v1") {
target['e' + eventType + eventHandle] = eventHandle;
target.attachEvent('on' + eventType, function () {
target['e' + eventType + eventHandle]();
});
} else {
target.addEventListener(eventType, eventHandle, false);
}
}, // addEvent
// detach event
removeEvent: function (target, eventType, eventHandle) {
if (target.removeEventListener) { //w3c
target.removeEventListener(eventType, eventHandle, false);
} else if (target.detachEvent) { // ie
target.detachEvent("on" + eventType, eventHandle);
} else {
target["on" + eventType] = null;
}
}, // removeEvent
addEvents: function (target, eventTypes, fn) {
types = types.split(",");
for (var i = 0; i < types.length; i++) {
this.addEvent(target, types[i], fn);
}
} // addEvents
}
var _Alert = function(o) {
this._init.apply(this,arguments);
}
_Alert.prototype = {
_config : ["_width","_height","_isdrag","_isshade","_id","_html","_type"],
_width : 500,
_height : 300,
_isdrag : false,
_isshade : false,
_divM : null,//弹出框
_divTitle : null,//弹出框的标题部分
_divBody : null,//弹出框的主体
_id : "content",
_html : "",
_type : "Confirm",
_init : function(o) {
var c = this._config;
for(var i = 0;i < c.length;i++) {
//alert(o.hasOwnProperty(c[i]));
if(o[c[i]] && typeof(o[c[i]]) != undefined) {
this[c[i]] = o[c[i]];
}
}
this._create();
},
_create : function() {
//var dM = this._divM;
//var dT = this._divTitle;
this._divM = document.createElement("div");
this._divM.id = this._id;
this._divM.style.width = this._width + "px";
this._divM.style.height = this._height + "px";
this._divM.style.position = "absolute";
this._divTitle = document.createElement("div");
this._divTitle.id = this._id + "Title";
this._divBody = document.createElement("div");
this._divBody.id = this._id + "Body";
this._divBody.style.height = (this._height - 28) + "px";
this._html += this._chooseType();
this._divBody.innerHTML = this._html;
this._divM.appendChild(this._divTitle);
this._divM.appendChild(this._divBody);
document.body.appendChild(this._divM);
if(this._isdrag) {
//this._bindOver();
this._bind(this._divM);
}
},
_bind : function(drag) {
var flag = true;
var moveable;
//var _version = $.browser.version;
//alert(_version);
var cw = document.documentElement.clientWidth, ch = document.documentElement.clientHeight;
var est = 0;//document.documentElement.scrollTop;
var sw = drag.scrollWidth, sh = drag.scrollHeight;
var dragTitle = this._divTitle;//document.getElementById("tipTitle");
dragTitle.onmouseover=function(e) {
//console.log("over");
dragTitle.style.cursor = "move";
}
dragTitle.onmousedown=function(e) {
if (flag == true) { moveable = true; } else { moveable = false; }
e = window.event ? window.event : e;
var ol = drag.offsetLeft,ot = drag.offsetTop - est;
var moveX = e.clientX - ol;
var moveY = e.clientY - ot;
drag.style.filter = "alpha(opacity=20)";
//console.log("down");
//alert(moveY);
document.onmousemove = function(e) {
//alert(moveable);
if(moveable) {
//console.log("move");
e = window.event ? window.event : e;
tipX = e.clientX - moveX;
tipY = e.clientY - moveY;
/*if (x > 0 && (x + sw < cw) && y > 0 && (y + sh < ch)) {
drag.style.left = tipX + "px";
drag.style.top = parseInt(tipY + est) + "px";
drag.style.margin = "auto";
}*/
drag.style.left = Math.max(Math.min(tipX,cw-drag.offsetWidth),0) + "px";
drag.style.top = Math.max(Math.min(tipY,ch-drag.offsetHeight),0) + "px";
}
}
document.onmouseup = function () { moveable = false; drag.style.filter = "alpha(opacity=100)"; };
}
},
/*
+--------------------------------------------------------------
+ @如果用Jade.util.addEvent这样去绑定就会拖动的时候一顿一顿的
+ @不是很明白原因
+--------------------------------------------------------------
_bindOver : function() {
var controll = this;
Jade.util.addEvent(controll._divM,"mouseover",function() {
controll._divM.style.cursor = "move";
});
this._bindDown();
},
_bindDown : function() {
var controll = this;
var flag = true;
var moveable;
var cw = document.documentElement.clientWidth;
var ch = document.documentElement.clientHeight;
var sw = controll._divM.scrollWidth;
var sh = controll._divM.scrollHeight;
Jade.util.addEvent(controll._divM,"mousedown",function(e) {
moveable = flag ? true : false;
e = window.event ? window.event : e;
var ol = controll._divM.offsetLeft;
var ot = controll._divM.offsetTop;
var moveX = e.clientX - ol;
var moveY = e.clientY - ot;
Jade.util.addEvent(document,"mouseover",function(e) {
if(moveable) {
e = window.event ? window.event : e;
tipX = e.clientX - moveX;
tipY = e.clientY - moveY;
//console.log(controll._divM);
controll._divM.style.left = Math.max(Math.min(tipX,cw-controll._divM.offsetWidth),0) + "px";
controll._divM.style.top = Math.max(Math.min(tipY,ch-controll._divM.offsetHeight),0) + "px";
}
});
Jade.util.addEvent(document,"mouseup",function() {
moveable = false;
});
});
}*/
_chooseType : function() {
var html = "";
switch(this._type) {
case "Confirm" :
html = '<div class="contentConfirm"><a href="#">确 定</a><a href="#">取 消</a></div>';break;
case "Alert" :
//todo
}
return html;
}
}
样式什么的可以自己定义。代码稍微看下就能明白了。希望对大家有帮助。
源码下载：Demo