说到js的面向对象，就不得不提到prototype这个js内置属性了(注意：这里的prototype可不是prototype.js),它的作用就是可以动态的向一个对象(object)添加某种属性。我现在要做的就是尽可能的让代码达到公用，像继承啦之类的。好了，这些就不多说了，对prototype不了解的可以搜索下相关内容。
今天要做的是点击一个html元素让其弹出一个友好的对话框来，首先要明确两点，一点是我可能会大量的用到这种方式，甚至不希望出现系统的alert或confirm，第二点就是弹出的内容尽量的可以多种化，甚至可以自定义。明确这两点后，我们就可以写js代码了，都是些很初级的东西，如果你要鄙视的话就尽情的鄙视我吧！^.^
首先定义一个简单的对象:
复制代码 代码如下:
function objDIV() {
this.bgdiv ;
this.infodiv ;
}
首先，我们希望弹出一个遮罩层，我给它命名openBackDiv();
复制代码 代码如下:
function openBackDiv(txbdiv) {
txbdiv.bgdiv = document.createElement("div");
txbdiv.bgdiv.setAttribute("id", "overDiv");
txbdiv.bgdiv.innerHTML = "<iframe frameborder=https://www.jb51.net/article/\"no\" class=https://www.jb51.net/article/\"overPanel\" id=https://www.jb51.net/article/\"ifrover\"></iframe>";
}
再者，把它添加到刚刚定义的对象的prototype里去(openBG()):
复制代码 代码如下:
objDIV.prototype.openBG = function() {
openBackDiv(this);
document.body.appendChild(this.bgdiv);
this.bgdiv.style.display = "block";
this.bgdiv.style.width = document.documentElement.clientWidth + "px";
this.bgdiv.style.height = document.documentElement.scrollHeight + "px";
}
再就是添加弹出信息层的方法,和上面一样做就行了。所以才说这个是很基础的东西，好像确实没啥好说的，直接上代码吧！
这是一个正在加载的弹出层，有点粗糙.
复制代码 代码如下:
function openLoadDiv(txbdiv) {
txbdiv.infodiv = document.createElement("div");
txbdiv.infodiv.setAttribute("id", "div_info");
txbdiv.infodiv.innerHTML = "<div style=https://www.jb51.net/article/\" line-height:1.5;background:url(../images/tips-top-bg.gif) repeat-x; height:54px; text-align:center;\"><img border=https://www.jb51.net/article/\"0\" src=https://www.jb51.net/article/\"../images/xtts.gif\" /></div><div><div><img src='https://www.jb51.net/images/business/loading.gif'/></div><div><p>请稍等，正在处理中...</p></div></div></div>";
document.body.appendChild(txbdiv.infodiv);
txbdiv.infodiv.style.width = "550px";
txbdiv.infodiv.style.height = "270px";
txbdiv.infodiv.style.fontSize = "14px";
txbdiv.infodiv.style.position = "absolute";
txbdiv.infodiv.style.background = "#fff";
txbdiv.infodiv.style.zIndex = "9999";
centerobject();//居中的方法
}
objDIV.prototype.openLoading = function() { this.openBG(); openLoadDiv(this); }
做完这些后一个简单的弹出加载层就完成了.是不是有点成就感了，那么接着完成其他的工作吧！既然都弹出了，总得在某个时刻把它们移掉吧，下面就是移除这些层的方法。
复制代码 代码如下:
objDIV.prototype.removeBG = function() {
if (this.bgdiv || document.getElementById("overDiv")) {
if (this.bgdiv) {
document.body.removeChild(this.bgdiv);
} else {
document.body.removeChild(document.getElementById("overDiv"));
}
}
}
objDIV.prototype.removeInfo = function() {
this.removeBG();
if (this.infodiv) {
document.body.removeChild(this.infodiv);
} else {
document.body.removeChild(document.getElementById("div_info"));
}
}
如果想弹出不同层信息的话，就可以添加不同的prototype属性。
完整的代码
[code]
//******js弹出层提示txb20100110********//
function objDIV() {
this.bgdiv ;
this.infodiv ;
}
objDIV.prototype.openBG = function() {
openBackDiv(this);
document.body.appendChild(this.bgdiv);
this.bgdiv.style.display = "block";
this.bgdiv.style.width = document.documentElement.clientWidth + "px";
this.bgdiv.style.height = document.documentElement.scrollHeight + "px";
}
objDIV.prototype.openRegInfo = function() {
this.openBG();
openDiv(this);
}
objDIV.prototype.openLoading = function() {
this.openBG();
openLoadDiv(this);
}
objDIV.prototype.openLoad = function() {
openLoadDiv(this);
}
objDIV.prototype.removeBG = function() {
if (this.bgdiv || document.getElementById("overDiv")) {
if (this.bgdiv) {
document.body.removeChild(this.bgdiv);
} else {
document.body.removeChild(document.getElementById("overDiv"));
}
}
}
objDIV.prototype.removeInfo = function() {
this.removeBG();
if (this.infodiv) {
document.body.removeChild(this.infodiv);
} else {
document.body.removeChild(document.getElementById("div_info"));
}
}
function openLoadDiv(txbdiv) {
txbdiv.infodiv = document.createElement("div");
txbdiv.infodiv.setAttribute("id", "div_info");
txbdiv.infodiv.innerHTML = "<div style=https://www.jb51.net/article/\" line-height:1.5;background:url(tips-top-bg.gif) repeat-x; height:54px; text-align:center;\"><img border=https://www.jb51.net/article/\"0\" src=https://www.jb51.net/article/\"xtts.gif\" /></div><div><div><img src='https://www.jb51.net/loading.gif'/></div><div><p>请稍等，正在处理中...</p></div></div></div>";
document.body.appendChild(txbdiv.infodiv);
txbdiv.infodiv.style.width = "550px";
txbdiv.infodiv.style.height = "270px";
txbdiv.infodiv.style.fontSize = "14px";
txbdiv.infodiv.style.position = "absolute";
txbdiv.infodiv.style.background = "#fff";
txbdiv.infodiv.style.zIndex = "9999";
centerobject();
}
function openBackDiv(txbdiv) {
txbdiv.bgdiv = document.createElement("div");
txbdiv.bgdiv.setAttribute("id", "overDiv");
//alert(document.documentElement.clientWidth);
txbdiv.bgdiv.innerHTML = "<iframe frameborder=https://www.jb51.net/article/\"no\" class=https://www.jb51.net/article/\"overPanel\" id=https://www.jb51.net/article/\"ifrover\"></iframe>";
//"<div id=https://www.jb51.net/article/\"overPanel\" > <iframe frameborder=https://www.jb51.net/article/\"no\" class=https://www.jb51.net/article/\"overPanel\" id=https://www.jb51.net/article/\"ifrover\"></iframe></div>";
//txbdiv.openBG();
}
function openDiv(txbdiv) {
//txbdiv.openBG();
txbdiv.infodiv = document.createElement("div");
txbdiv.infodiv.setAttribute("id", "div_info");
txbdiv.infodiv.innerHTML = "<div style=https://www.jb51.net/article/\" line-height:1.5;background:url(tips-top-bg.gif) repeat-x; height:54px; text-align:center;\"><img border=https://www.jb51.net/article/\"0\" src=https://www.jb51.net/article/\"xtts.gif\" /></div><div style=https://www.jb51.net/article/\"padding:20px;\"><div style=https://www.jb51.net/article/\"width:120px; float:left;\"><img src=https://www.jb51.net/article/\"xin.gif\" /></div><div style=https://www.jb51.net/article/\"float:right; width:350px;color:#b44201;\" id=https://www.jb51.net/article/\"showdivinfo\"><p>恭喜您，注册成功!</p><p>请牢记您的账号：<font color=https://www.jb51.net/article/\"#b44201\" id=https://www.jb51.net/article/\"orpai_ID\">5678537</font></p></div><div style=https://www.jb51.net/article/\"margin:0 auto;\"><input type='button' value='确认'/></div></div>";
document.body.appendChild(txbdiv.infodiv);
txbdiv.infodiv.style.width = "550px";
txbdiv.infodiv.style.height = "270px";
txbdiv.infodiv.style.fontSize = "14px";
txbdiv.infodiv.style.position = "absolute";
txbdiv.infodiv.style.background = "#fff";
txbdiv.infodiv.style.zIndex = "9999";
centerobject();
}
function centerobject() {
if (document.getElementById("overDiv")) {
var objdiv = document.getElementById("overDiv").style;
objdiv.height = document.documentElement.scrollHeight + "px";
objdiv.left = parseInt((document.documentElement.clientWidth - parseInt(objdiv.width)) / 2) + "px";
//alert(document.documentElement.scrollHeight)
objdiv.top = parseInt((document.documentElement.clientHeight - parseInt(objdiv.height)) / 2) + "px";
}
if (document.getElementById("div_info")) {
var div_info = document.getElementById("div_info").style;
div_info.left = parseInt((document.documentElement.clientWidth - parseInt(div_info.width)) / 2) + "px";
div_info.top = parseInt((document.documentElement.clientHeight - parseInt(div_info.height)) / 2) + "px";
}
}
function centerDIV(objId) {
if (document.getElementById(objId)) {
var objdiv = document.getElementById(objId).style;
objdiv.height = document.getElementById(objId).scrollHeight + "px";
objdiv.width = document.getElementById(objId).scrollWidth + "px";
objdiv.left = parseInt((document.documentElement.clientWidth - parseInt(objdiv.width)) / 2) + "px";
//alert(document.documentElement.scrollHeight)
objdiv.top = parseInt((document.documentElement.clientHeight - parseInt(objdiv.height))/ 2) + "px";
}
}
function centerObj(obj) {
if (obj) {
var objdiv = obj.style;
objdiv.height = obj.scrollHeight + "px";
objdiv.width = obj.scrollWidth + "px";
objdiv.left = parseInt((document.documentElement.clientWidth - parseInt(objdiv.width)) / 2) + "px";
//alert(document.documentElement.scrollHeight)
objdiv.top = parseInt((document.documentElement.clientHeight - parseInt(objdiv.height)) / 2) + "px";
}
}
//window.onresize = centerobject;
[code]
演示地址
您可能感兴趣的文章: