百度空間的popup效果分析第2/3頁(yè)
更新時(shí)間：2008年10月10日 23:01:44 作者：
自從用firefox瀏覽器以來(lái)，就幾乎養(yǎng)成了一個(gè)習(xí)慣，就想用WebDeveloper把一些漂亮網(wǎng)站的js包括css給down下來(lái)分析一下，用來(lái)學(xué)習(xí)。
Event.observe(window,'unload',Event.unloadCache,false);
var Class=function ()
{
var _class=function ()
{
this.initialize.apply(this,arguments);
};
for(i=0;i<arguments.length;i++)
{
superClass=arguments[i];
for(member in superClass.prototype)
{
_class.prototype[member]=superClass.prototype[member];
};
};
_class.child=function ()
{
return new Class(this);
};
_class.extend=function (f)
{
for(property in f)
{
_class.prototype[property]=f[property];
};
};
return _class;
};
//改變百度空間的最頂端和最低端的div的id值
//如果flag為begin，則為彈出狀態(tài)的id值
//如果flag為end，則為非彈出狀態(tài)的id值，即原本的id值
function space(flag)
{
if(flag=="begin")
{
var ele=document.getElementById("ft");
if(typeof(ele)!="#ff0000"&&ele!=null)
ele.id="ft_popup";
ele=document.getElementById("usrbar");
if(typeof(ele)!="undefined"&&ele!=null)
ele.id="usrbar_popup";
}
else if(flag=="end")
{
var ele=document.getElementById("ft_popup");
if(typeof(ele)!="undefined"&&ele!=null)
ele.id="ft";
ele=document.getElementById("usrbar_popup");
if(typeof(ele)!="undefined"&&ele!=null)
ele.id="usrbar";
};
};
//**************************************************Popup類(lèi)彈出窗口***************************************************************
var Popup=new Class();
Popup.prototype={
//彈出窗口中框架的name名稱(chēng)
iframeIdName:'ifr_popup',
initialize:function (config)
{
//---------------彈出對(duì)話(huà)框的配置信息------------------
//contentType:設(shè)置內(nèi)容區(qū)域?yàn)槭裁搭?lèi)型：1為另外一個(gè)html文件 | 2為自定義html字符串 | 3為confirm對(duì)話(huà)框 | 4為alert警告對(duì)話(huà)框
//isHaveTitle:是否顯示標(biāo)題欄
//scrollType：設(shè)置或獲取對(duì)話(huà)框中的框架是否可被滾動(dòng)
//isBackgroundCanClick：彈出對(duì)話(huà)框后，是否允許蒙布后的所有元素被點(diǎn)擊。也就是如果為false的話(huà)，就會(huì)有全屏蒙布，如果為true的話(huà)，就會(huì)去掉全屏蒙布
//isSupportDraging：是否支持拖拽
//isShowShadow：是否現(xiàn)實(shí)陰影
//isReloadOnClose：是否刷新頁(yè)面，并關(guān)閉對(duì)話(huà)框
//width：寬度
//height：高度
this.config=Object.extend({contentType:1,isHaveTitle:true,scrollType:'yes',isBackgroundCanClick:false,isSupportDraging:true,isShowShadow:true,isReloadOnClose:true,width:400,height:300},config||{});
//----------------對(duì)話(huà)框的參數(shù)值信息------------------------
//shadowWidth ：陰影的寬度
//contentUrl ：html鏈接頁(yè)面
//contentHtml ：html內(nèi)容
//callBack ：回調(diào)的函數(shù)名
//parameter ：回調(diào)的函數(shù)名中傳的參數(shù)
//confirmCon ：對(duì)話(huà)框內(nèi)容
//alertCon ：警告框內(nèi)容
//someHiddenTag：頁(yè)面中需要隱藏的元素列表，以逗號(hào)分割
//someHiddenEle：需要隱藏的元素的ID列表(和someToHidden的區(qū)別是：someHiddenEle是通過(guò)getElementById，而someToHidden是通過(guò)getElementByTagName，里面放的是對(duì)象)
//overlay ：
//coverOpacity ：蒙布的透明值
this.info={shadowWidth:4,title:"",contentUrl:"",contentHtml:"",callBack:null,parameter:null,confirmCon:"",alertCon:"",someHiddenTag:"select,object,embed",someHiddenEle:"",overlay:0,coverOpacity:40};
//設(shè)置顏色cColor:蒙布的背景, bColor:內(nèi)容區(qū)域的背景, tColor:標(biāo)題欄和邊框的顏色,wColor:字體的背景色
this.color={cColor:"#EEEEEE",bColor:"#FFFFFF",tColor:"#709CD2",wColor:"#FFFFFF"};
this.dropClass=null;
//用來(lái)放置隱藏了的對(duì)象列表，在hiddenTag方法中第一次調(diào)用
this.someToHidden=[];
//如果沒(méi)有標(biāo)題欄則不支持拖拽
if(!this.config.isHaveTitle)
{
this.config.isSupportDraging=false;
}
//初始化
this.iniBuild();
},
//設(shè)置配置信息和參數(shù)內(nèi)容
setContent:function (arrt,val)
{
if(val!='')
{
switch(arrt)
{
case 'width':this.config.width=val;
break;
case 'height':this.config.height=val;
break;
case 'title':this.info.title=val;
break;
case 'contentUrl':this.info.contentUrl=val;
break;
case 'contentHtml':this.info.contentHtml=val;
break;
case 'callBack':this.info.callBack=val;
break;
case 'parameter':this.info.parameter=val;
break;
case 'confirmCon':this.info.confirmCon=val;
break;
case 'alertCon':this.info.alertCon=val;
break;
case 'someHiddenTag':this.info.someHiddenTag=val;
break;
case 'someHiddenEle':this.info.someHiddenEle=val;
break;
case 'overlay':this.info.overlay=val;
};
};
},
iniBuild:function ()
{
G('dialogCase')?G('dialogCase').parentNode.removeChild(G('dialogCase')):function (){};
var oDiv=document.createElement('span');
oDiv.id='dialogCase';
document.body.appendChild(oDiv);
},
build:function ()
{
//設(shè)置全屏蒙布的z-index
var baseZIndex=10001+this.info.overlay*10;
//設(shè)置蒙布上的彈出窗口的z-index(比蒙布的z-index高2個(gè)值)
var showZIndex=baseZIndex+2;
//定義框架名稱(chēng)
this.iframeIdName='ifr_popup'+this.info.overlay;
//設(shè)置圖片的主路徑
var path="http://img.baidu.com/hi/img/";
//關(guān)閉按鈕
var close='<input type="image" id="dialogBoxClose" src="'+path+'dialogclose.gif" border="0" width="16" height="16" align="absmiddle" title="關(guān)閉"/>';
//使用濾鏡設(shè)置對(duì)象的透明度
var cB='filter: alpha(opacity='+this.info.coverOpacity+');opacity:'+this.info.coverOpacity/100+';';
//設(shè)置全屏的蒙布
var cover='<div id="dialogBoxBG" style="position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:'+baseZIndex+';'+cB+'background-color:'+this.color.cColor+';display:none;"></div>';
//設(shè)置彈出的主窗口設(shè)置
var mainBox='<div id="dialogBox" style="border:1px solid '+this.color.tColor+';display:none;z-index:'+showZIndex+';position:relative;width:'+this.config.width+'px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="'+this.color.bColor+'">';
//設(shè)置窗口標(biāo)題欄
if(this.config.isHaveTitle)
{
mainBox+='<tr height="24" bgcolor="'+this.color.tColor+'"><td><table style="-moz-user-select:none;height:24px;" width="100%" border="0" cellpadding="0" cellspacing="0" ><tr>'+'<td width="6" height="24"></td><td id="dialogBoxTitle" style="color:'+this.color.wColor+';font-size:14px;font-weight:bold;">'+this.info.title+' </td>'+'<td id="dialogClose" width="20" align="right" valign="middle">'+close+'</td><td width="6"></td></tr></table></td></tr>';
}
else
{
mainBox+='<tr height="10"><td align="right">'+close+'</td></tr>';
};
//設(shè)置窗口主內(nèi)容區(qū)域
mainBox+='<tr style="height:'+this.config.height+'px" valign="top"><td id="dialogBody" style="position:relative;"></td></tr></table></div>'+'<div id="dialogBoxShadow" style="display:none;z-index:'+baseZIndex+';"></div>';
//如果有蒙布
if(!this.config.isBackgroundCanClick)
{
G('dialogCase').innerHTML=cover+mainBox;
G('dialogBoxBG').style.height=document.body.scrollHeight;
}
else
{
G('dialogCase').innerHTML=mainBox;
}
Event.observe(G('dialogBoxClose'),"click",this.reset.bindAsEventListener(this),false);
//如果支持拖動(dòng),則設(shè)置拖動(dòng)處理
if(this.config.isSupportDraging)
{
dropClass=new Dragdrop(this.config.width,this.config.height,this.info.shadowWidth,this.config.isSupportDraging,this.config.contentType);
G("dialogBoxTitle").style.cursor="move";
};
this.lastBuild();
},
lastBuild:function ()
{
//設(shè)置confim對(duì)話(huà)框的具體內(nèi)容
var confirm='<div style="width:100%;height:100%;text-align:center;"><div style="margin:20px 20px 0 20px;font-size:14px;line-height:16px;color:#000000;">'+this.info.confirmCon+'</div><div style="margin:20px;"><input id="dialogOk" type="button" value=" 確定 "/> <input id="dialogCancel" type="button" value=" 取消 "/></div></div>';
//設(shè)置alert對(duì)話(huà)框的具體內(nèi)容
var alert='<div style="width:100%;height:100%;text-align:center;"><div style="margin:20px 20px 0 20px;font-size:14px;line-height:16px;color:#000000;">'+this.info.alertCon+'</div><div style="margin:20px;"><input id="dialogYES" type="button" value=" 確定 "/></div></div>';
var baseZIndex=10001+this.info.overlay*10;
var coverIfZIndex=baseZIndex+4;
//判斷內(nèi)容類(lèi)型決定窗口的主內(nèi)容區(qū)域應(yīng)該顯示什么
if(this.config.contentType==1)
{
var openIframe="<iframe width='100%' style='height:"+this.config.height+"px' name='"+this.iframeIdName+"' id='"+this.iframeIdName+"' src='"+this.info.contentUrl+"' frameborder='0' scrolling='"+this.config.scrollType+"'></iframe>";
var coverIframe="<div id='iframeBG' style='position:absolute;top:0px;left:0px;width:1px;height:1px;z-index:"+coverIfZIndex+";filter: alpha(opacity=00);opacity:0.00;background-color:#ffffff;'><div>";
G("dialogBody").innerHTML=openIframe+coverIframe;
}
else if(this.config.contentType==2)
{
G("dialogBody").innerHTML=this.info.contentHtml;
}
else if(this.config.contentType==3)
{
G("dialogBody").innerHTML=confirm;Event.observe(G('dialogOk'),"click",this.forCallback.bindAsEventListener(this),false);
Event.observe(G('dialogCancel'),"click",this.close.bindAsEventListener(this),false);
}
else if(this.config.contentType==4)
{
G("dialogBody").innerHTML=alert;
Event.observe(G('dialogYES'),"click",this.close.bindAsEventListener(this),false);
};
},
//重新加載彈出窗口的高度和內(nèi)容
reBuild:function ()
{
G('dialogBody').height=G('dialogBody').clientHeight;
this.lastBuild();
},
show:function ()
{
//隱藏一些在info中制定的元素
this.hiddenSome();
//彈出窗口居中
this.middle();
//設(shè)置陰影
if(this.config.isShowShadow)
this.shadow();
},
//設(shè)置回調(diào)函數(shù)
forCallback:function ()
{
return this.info.callBack(this.info.parameter);
},
//為彈出窗口設(shè)置陰影
shadow:function ()
{
var oShadow=G('dialogBoxShadow');
var oDialog=G('dialogBox');oShadow['style']['position']="absolute";
oShadow['style']['background']="#000";
oShadow['style']['display']="";
oShadow['style']['opacity']="0.2";
oShadow['style']['filter']="alpha(opacity=20)";
oShadow['style']['top']=oDialog.offsetTop+this.info.shadowWidth;
oShadow['style']['left']=oDialog.offsetLeft+this.info.shadowWidth;
oShadow['style']['width']=oDialog.offsetWidth;oShadow['style']['height']=oDialog.offsetHeight;
},
相關(guān)文章
javascript中Date()函數(shù)在各瀏覽器中的顯示效果
本文給大家分享的是javascript中Date()函數(shù)在各瀏覽器中的顯示效果，由于各大瀏覽器的兼容性問(wèn)題，本文做了這個(gè)測(cè)試，希望有需要的小伙伴可以少走些彎路2015-06-06
本篇文章主要介紹了Webpack打包字體font-awesome的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
JavaScript常見(jiàn)的五種數(shù)組去重的方式
本文主要JavaScript常見(jiàn)的五種數(shù)組去重的方式進(jìn)行一一思路分析實(shí)例介紹，易于理解與學(xué)習(xí)，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
本篇文章主要是對(duì)JS日期比較大小的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
純js代碼實(shí)現(xiàn)未知寬高的元素在指定元素中垂直水平居中顯示
本章節(jié)介紹一下如何實(shí)現(xiàn)未知寬高的元素在指定元素下實(shí)現(xiàn)垂直水平居中效果，代碼簡(jiǎn)單易懂，需要的朋友可以參考下本文2015-09-09
javascript數(shù)組去重常用方法實(shí)例分析
這篇文章主要介紹了javascript數(shù)組去重常用方法,結(jié)合實(shí)例形式對(duì)比分析了幾種常用的數(shù)組去重方法實(shí)現(xiàn)技巧與優(yōu)缺點(diǎn),需要的朋友可以參考下2017-04-04
客戶(hù)端js判斷文件類(lèi)型和文件大小即限制上傳大小
需要腳本在客戶(hù)端判斷大小和文件類(lèi)型，由于網(wǎng)上沒(méi)有適合的，就自己寫(xiě)了一個(gè)并測(cè)試 文件上傳大小限制的一個(gè)例子，在此與大家分享下2013-11-11
這篇文章主要為大家詳細(xì)介紹了js自制圖片放大鏡功能的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要幫助大家理解JavaScript中worker事件api，對(duì)worker事件api有一個(gè)深刻了解，感興趣的小伙伴們可以參考一下2015-12-12
JavaScript實(shí)現(xiàn)矩形塊大小任意縮放
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)矩形塊大小任意縮放，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08