如题，本文将使用纯粹的脚本javascript实现渐变的弹出层，其想法也非常简单：利用iframe实现遮盖，再借助一个div用于展现弹出层的内容，最后再使用其内置函数setinterval()和clearinterval()实现渐变，原理非常简单，只不过要注意对dom对象/元素的精确控制。由于代码比较简单，在此就不再赘述。以下代码在ie6+,ff3.5+测试通过。
脚本flyout.js:
复制代码 代码如下:
// jscript file
if (navigator.useragent.tolowercase().indexof('msie') > -1) {
window.isie = true;
window.isie6 = navigator.appversion.indexof(msie 6.0;) > -1;
window.isie7 = navigator.appversion.indexof(msie 7.0;) > -1;
window.isie8 = navigator.appversion.indexof(msie 8.0;) > -1;
}
var $ = function(objid) { return document.getelementbyid(objid) };
var _flyout;
var _fadetimer;
function showflyout(divwidth, divheight, paddingwidth) {
var flyout = function() {
}
flyout.prototype = {
clientwidth: document.documentelement.clientwidth,
clientheight: document.documentelement.clientheight,
scrollwidth: document.documentelement.scrollwidth,
scrollheight: document.documentelement.scrollheight,
iframeid: envelopiframe,
divid: popupcontent,
iframebgcolor: #888888,
show: function(divcontent) {
//create envelop iframe
csstext = position:absolute; z-index:100; background-color:#888888; border-width:0px; filter:alpha(opacity=0); opacity:0.0;;
csstext += left:0px;;
csstext += top:0px;;
csstext += width: + this.scrollwidth + px;;
csstext += height: + this.scrollheight + px;;
this.create(iframe, this.iframeid, csstext, cppl_iframesrc.htm, );
_fadetimer = setinterval(function() { fadeiframe(envelopiframe, 0.05, 0, 0.5, true) }, 5);
//create flyout
var csstext = ;
csstext += display:block; _position:absolute; position:fixed; z-index:101; border:solid 1px gray; background-color:white;;
csstext += left: + (this.clientwidth - divwidth - paddingwidth) / 2 + px;;
csstext += top: + (this.clientheight - divheight - paddingwidth) / 2 + px;;
csstext += width: + (divwidth + paddingwidth) + px;;
csstext += height: + (divheight + paddingwidth) + px;;
this.create(div, this.divid, csstext, , divcontent);
},
create: function(type, id, csstext, iframesrc, innerhtml) {
var obj = document.createelement(type);
if (iframesrc.length > 0) {
obj.src = iframesrc;
}
obj.setattribute(id, id);
obj.style.csstext = csstext;
if (innerhtml.length > 0) {
obj.innerhtml = innerhtml;
}
document.body.appendchild(obj);
if (iframesrc.length > 0) {
if (window.isie) {
window.envelopiframe.document.bgcolor = this.iframebgcolor;
}
}
},
close: function() {
var objiframe = document.getelementbyid(this.iframeid);
var objdiv = document.getelementbyid(this.divid);
if (objiframe && objdiv) {
document.body.removechild(objiframe);
document.body.removechild(objdiv);
}
},
onresize: function() {
var objiframe = document.getelementbyid(this.iframeid);
var objdiv = document.getelementbyid(this.divid);
if (objiframe && objdiv) {
objiframe.style.width = document.documentelement.scrollwidth + px;
objiframe.style.height = document.documentelement.scrollheight + px;
objdiv.style.left = (document.documentelement.clientwidth - divwidth) / 2 + px;
objdiv.style.top = (document.documentelement.clientheight - divheight) / 2 + px;
}
},
onscroll: function() {
var objdiv = document.getelementbyid(this.divid);
if (objdiv) {
objdiv.style.left = (document.documentelement.clientwidth - divwidth) / 2 + document.documentelement.scrollleft + px;
objdiv.style.top = (document.documentelement.clientheight - divheight) / 2 + document.documentelement.scrolltop + px;
}
}
};
_flyout = new flyout();
_flyout.show(this is a flyout.close flyout
);
}
function closeflyout() {
clearinterval(_fadetimer);
_fadetimer = setinterval(function() { fadeiframe(envelopiframe, 0.05, 0, 0.5, false) }, 5);
}
window.onresize = function() {
if (_flyout) {
_flyout.onresize();
}
};
window.onscroll = function() {
if (_flyout && isie6) {
_flyout.onscroll();
}
};
function fadeiframe(objid, speed, minopacity, maxopacity, flag) {
var dialog = $(objid);
if (dialog) {
var value;
if (flag) {
if (parsefloat(dialog.style.opacity) value = parsefloat(dialog.style.opacity) + speed;
dialog.style.filter = 'alpha(opacity=' + value * 100 + ')';
dialog.style.opacity = '' + value + '';
}
else {
clearinterval(_fadetimer);
}
}
else {
if (parsefloat(dialog.style.opacity) >= minopacity) {
value = parsefloat(dialog.style.opacity) - speed;
dialog.style.filter = 'alpha(opacity=' + value * 100 + ')';
dialog.style.opacity = '' + value + '';
}
else {
clearinterval(_fadetimer);
if (_flyout) {
_flyout.close();
}
}
}
}
}
调用aspx代码:
复制代码 代码如下:
flyout sample
click me to test
最终效果图：