javascript彈出層代碼

<script type="text/javascript">// <![cdata[
/* @author: hongru.chen
** @date: 2010-09-15
** @vision: 1.1
*/
var hongru = {};
function $(id){return document.getelementbyid(id)}
object.prototype.extend = function(target, /*optional*/source, /*optional*/deep) {
target = target || {};
var stype = typeof source, i = 1, options;
if( stype === 'undefined' || stype === 'boolean' ) {
deep = stype === 'boolean' ? source : false;
source = target;
target = this;
}
if( typeof source !== 'object' && object.prototype.tostring.call(source).call(source) !== '[object function]' )
source = {};

while(i <= 2) {
options = i === 1 ? target : source;
if( options != null ) {
for( var name in options ) {
var src = target[name], copy = options[name];
if(target === copy)
continue;
if(deep && copy && typeof copy === 'object' && !copy.nodetype)
target[name] = this.extend(src ||
(copy.length != null ? [] : {}), copy, deep);
else if(copy !== undefined)
target[name] = copy;
}
}
i++;
}
return target;
};
isfunction = function( fn ) {
return !!fn && typeof fn != "string" && !fn.nodename &&
fn.constructor != array && /^[s[]?function/.test( fn + "" );
}
hongru.box = function(){
var box,mask,content,_content,_height,_width,ispreload,flag = false;

return{
open:function(con,options){
//default options
var defaultoptions = {
width:300,
height:200,
ispre:true,
time:0,
title:'對話方塊',
isbar:true,
isshut:true
};
options = options?options:{};
options = object.extend(defaultoptions,options);

if(!flag){
box = document.createelement('div');box.id = "popup-box";
box.style.css教程text = "position:absolute; display:none; background:#fff url(preload.gif) no-repeat 50% 50%; border:5px solid #ccc; z-index:2000";
mask = document.createelement('div');mask.id = "popup-mask";
mask.style.csstext = "position:absolute; display:none; top:0; left:0; height:100%; width:100%; background:#000; z-index:1500";
content = document.createelement('div');content.id = "popup-content";
content.style.csstext = "background:#fff";
bar = document.createelement('div'); bar.id = "popup-bar";
bar.style.csstext = "background:none repeat scroll 0 0 #f7f7f7;border-bottom:4px solid #eeeeee;border-top:3px solid #f9f9f9;margin-top:2px;position:relative";
wraptit = document.createelement('div'); wraptit.id = "wrap-tit";
wraptit.style.csstext = "background:none repeat scroll 0 0 #f3f3f3;border-bottom:5px solid #f1f1f1;border-top:4px solid #f5f5f5;line-height:5px;margin-top:3px;";
tit = document.createelement('span'); tit.id = "popup-tit";
tit.style.csstext = "cursor:text;margin-left:10px;position:relative;color:#333;font-size:84%"

shut = document.createelement('a'); shut.id = "popup-shut";
shut.innerhtml = '×';
shut.style.csstext = "color:#34538b;cursor:pointer;font-family:tahoma;font-weight:bold;position:absolute;top:0px;right:10px;text-decoration:none;";
document.body.appendchild(mask); document.body.appendchild(box); box.appendchild(bar); box.appendchild(content); bar.appendchild(wraptit); bar.appendchild(shut); wraptit.appendchild(tit);
mask.onclick = shut.onclick = hongru.box.hide;
//bar.onclick = function(){alert($('sure').id)}

window.onresize = hongru.box.resize;
flag = true;
}tit.innerhtml = options.title;
options.isshut?shut.style.display = '':shut.style.display = 'none';
options.isbar?bar.style.display = '':bar.style.display = 'none';
if(!options.ispre){
box.style.width = options.width?options.width+'px':'auto';
box.style.height = options.height?options.height+'px':'auto';
box.style.backgroundimage = 'none';
content.innerhtml = con;
}
else{
content.style.display = 'none';
box.style.width = box.style.height = '100px';
}
this.mask();
this.alpha(mask,1,50);
_content = con; _height = options.height; _width = options.width; ispreload = options.ispre;
if(options.time){
settimeout(function(){hongru.box.hide()},1000*options.time);
}
},

fill:function(con,options){
if(options.ispre){
if(!options.width || !options.height){
var autowidth = box.style.width, autoheight = box.style.height;
content.innerhtml = con;
box.style.width = options.width?options.width+'px':'';
box.style.height = options.height?options.height+'px':'';
content.style.display = '';
options.width = parseint(box.offsetwidth-10);
options.height = parseint(box.offsetheight-10);
content.style.display = 'none';
box.style.width = autowidth;
box.style.height = autoheight;
}
else{
content.innerhtml = con;

}
this.size(box,options.width,options.height);
}
else{
box.style.backgroundimage = 'none';
}
},

hide:function(){
hongru.box.alpha(box,-1,0);
},

resize:function(){
hongru.box.pos();
hongru.box.mask();
},

mask:function(){
mask.style.height = hongru.page.total(1)+'px';
mask.style.width=''; mask.style.width = hongru.page.total(0)+'px';
},

pos:function(){
var mintop = (hongru.page.height()/2)-(box.offsetheight/2); mintop = mintop<10?10:mintop;
box.style.top=(mintop+hongru.page.top())+'px';
box.style.left=(hongru.page.width()/2)-(box.offsetwidth/2)+'px';
},

alpha:function(obj,direction,destination){
clearinterval(obj.animing);
if(direction == 1){
obj.style.opacity=0; obj.style.filter='alpha(opacity=0)';
obj.style.display='block'; this.pos();
}
obj.animing = setinterval(function(){hongru.box.alphaanim(obj,destination,direction)},50);
},

alphaanim:function(obj,destination,direction){
var opacity = math.round(obj.style.opacity*100);
if(opacity == destination){
clearinterval(obj.animing);
if(direction == -1){
obj.style.display='none';
obj == box?hongru.box.alpha(mask,-1,0):content.innerhtml=box.style.backgroundimage='';
}else{
curoptions = {width:_width,height:_height,ispre:ispreload}
obj == mask?this.alpha(box,1,100):hongru.box.fill(_content,curoptions);
}
}else{
var n=math.ceil((opacity+((destination-opacity)*.5))); n=n==1?0:n;
obj.style.opacity=n/100;
obj.style.filter='alpha(opacity='+n+')';
}
},

size:function(obj,width,height){
obj = typeof obj == 'object' ? obj : $(obj);
clearinterval(obj.sizing);
var offsetw = obj.offsetwidth, offseth = obj.offsetheight,
otherw = offsetw-parseint(obj.style.width), otherh = offseth-parseint(obj.style.height);
var wflag = (offsetw-otherw>width)?0:1, hflag = (offseth-otherh>height)?0:1;
obj.sizing = setinterval(function(){hongru.box.sizeanim(obj,width,otherw,wflag,height,otherh,hflag)},20);
},

sizeanim:function(obj,width,otherw,wflag,height,otherh,hflag){
var objw = obj.offsetwidth-otherw, objh = obj.offsetheight-otherh;
if(objw == width && objh == height){
clearinterval(obj.sizing);
box.style.backgroundimage='none';
content.style.display='block';
}else{
if(objw!=width){
var n = objw+((width-objw)*.5);
obj.style.width = wflag?math.ceil(n)+'px':math.floor(n)+'px';
}
if(objh!=height){
var n = objh+((height-objh)*.5);
obj.style.height = hflag?math.ceil(n)+'px':math.floor(n)+'px';
}
this.pos();

}
},

ask:function(message,options,surecall,cancelcall){
var elements = '<div class="wrap-remind" style="text-align:center">'+message+'<p><button id="sure-btn" class="sure-btn">確認</button> <button id="cancel-btn" class="cancel-btn">取消</button></p></div>';
hongru.box.open(elements,options);

function delay(){//回調
if(($('sure-btn') && $('cancel-btn')) != null){
clearinterval(checkcomplete);
//alert('yes');
$('sure-btn').onclick = function(){
if(isfunction(surecall)){surecall.call(this);}
}
$('cancel-btn').onclick = function(){
if(isfunction(cancelcall)){cancelcall.call(this);}
hongru.box.hide();
}
}}
var checkcomplete = setinterval(delay,100);
}
}
}();
hongru.page=function(){
return{
top:function(){return document.documentelement.scrolltop||document.body.scrolltop},
width:function(){return self.innerwidth||document.documentelement.clientwidth||document.body.clientwidth},
height:function(){return self.innerheight||document.documentelement.clientheight||document.body.clientheight},
total:function(d){
var b=document.body, e=document.documentelement;
return d?math.max(math.max(b.scrollheight,e.scrollheight),math.max(b.clientheight,e.clientheight)):
math.max(math.max(b.scrollwidth,e.scrollwidth),math.max(b.clientwidth,e.clientwidth))
}
}
}();
// ]]></script>

 

{
width:300 //自訂，彈出層主體（除邊框和標題列的寬度），為0時自適應。
height:200//自訂，彈出層主體（除邊框和標題列的高度），為0時自適應。
ispre:1 //true or false,是否有預先載入背景圖，
time:0 //延遲自動關閉時間，秒為單位，0時不觸發
title:'' //自訂title
isbar:1 //true or false,是否有標題列
isshut:1 //是否有關閉按鈕
}

 

show sourceview sourceprint?alphaanim:function(obj,destination,direction){
var opacity = math.round(obj.style.opacity*100);
if(opacity == destination){
clearinterval(obj.animing);
if(direction == -1){
obj.style.display='none';
obj == box?hongru.box.alpha(mask,-1,0):content.innerhtml=box.style.backgroundimage='';
}else{
curoptions = {width:_width,height:_height,ispre:ispreload}
obj == mask?this.alpha(box,1,100):hongru.box.fill(_content,curoptions);
}
}else{
var n=math.ceil((opacity+((destination-opacity)*.5))); n=n==1?0:n;
obj.style.opacity=n/100;
obj.style.filter='alpha(opacity='+n+')';
}
},

box代碼

show sourceview sourceprint?sizeanim:function(obj,width,otherw,wflag,height,otherh,hflag){
var objw = obj.offsetwidth-otherw, objh = obj.offsetheight-otherh;
if(objw == width && objh == height){
clearinterval(obj.sizing);
box.style.backgroundimage='none';
content.style.display='block';
}else{
if(objw!=width){
var n = objw+((width-objw)*.5);
obj.style.width = wflag?math.ceil(n)+'px':math.floor(n)+'px';
}
if(objh!=height){
var n = objh+((height-objh)*.5);
obj.style.height = hflag?math.ceil(n)+'px':math.floor(n)+'px';
}
this.pos();
}
},

下面看一款完整的彈出層執行個體代碼

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.<div onclick="javascript:closeflyout()">close flyout</div>");
}
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) <= maxopacity) {
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();
}
}
}
}
}

調用asp教程x代碼:
複製代碼 代碼如下:
<%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head1" runat="server">
<title>flyout sample</title>
<script type="text/javascript" src="flyout.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div onclick="javascript:showflyout(700, 300, 10);">
click me to test
</div>
<br />
<br />
<br />
<br />
<br />
<br />

</div>
</form>
</body>
</html>