/**
* version:1.0
* pubDate:09-06-24
* author: kangzye
*/
function Displayer(){
_this=this;
this.oldBodyMargin=document.body.style.margin;
this.oldBodyHeight=document.body.style.height;
this.oldBodyPadding=document.body.style.padding;
this.iframe=document.createElement('iframe');
this.coverDiv=document.createElement('div');
this.outerDiv=document.createElement('div');
this.topDiv=document.createElement('div');
this.contentDiv=document.createElement('div');
with(this.iframe.style){
position='absolute';
width='100%';
height='100%';
backgroundColor='#000000';
MozOpacity=0.1;
filter='alpha(opacity=10)';
left='0px';
top='0px';
border='none';
display='none';
zIndex=10000;
}
this.iframe.scrolling='no';
this.iframe.frameborder='0';
with(this.coverDiv.style){
position='absolute';
width='100%';
height='100%';
backgroundColor='#000000';
MozOpacity=0.6;
filter='alpha(opacity=60)';
left='0px';
top='0px';
display='none';
zIndex=10001;
}
with(this.outerDiv.style){
position='absolute';
MozOpacity=0.6;
filter='alpha(opacity=60)';
display='none';
zIndex=10002;
borderStyle='solid';
borderWidth='6px';
borderColor='#341212';
}
with(this.contentDiv.style){
backgroundColor='#FFFFFF';
paddingBottom='10px';
padding='5px';
}
with(this.topDiv.style){
textAlign='right';
backgroundColor='#FFFFFF';
}
this.outerDiv.appendChild(this.topDiv);
this.outerDiv.appendChild(this.contentDiv);
var closeText=document.createElement('span');
closeText.innerHTML='关闭';
with(closeText.style){
cursor='pointer';
fontSize='12px';
fontWeight='bolder';
color='#FFFFFF';
paddingRight='5px';
paddingTop='5px';
backgroundColor='#341212';
}
closeText.οnclick=function(){
_this.close();
}
this.topDiv.appendChild(closeText);
document.body.appendChild(this.iframe);
document.body.appendChild(this.coverDiv);
document.body.appendChild(this.outerDiv);
}
Displayer.prototype.show=function(){
document.body.style.height='100%';
this.iframe.style.display='block';
this.coverDiv.style.display='block';
this.outerDiv.style.display='block';
this.outerDiv.style.left=document.documentElement.clientWidth/2-this.outerDiv.offsetWidth/2+'px';
this.outerDiv.style.top=document.documentElement.scrollTop+document.documentElement.clientHeight/2-this.outerDiv.offsetHeight/2+'px';
document.body.style.overflow='hidden';
}
Displayer.prototype.setHtml=function(html){
this.contentDiv.innerHTML=html;
}
Displayer.prototype.setUrl=function(url){
}
Displayer.prototype.close=function(){
this.outerDiv.style.display='none';
this.coverDiv.style.display='none';
this.iframe.style.display='none';
document.body.style.height=this.oldBodyHeight;
document.body.style.overflow='block';
}
使用方式:
var displayer=new Displayer();
displayer.setHtml("nihao");
displayer.show();
效果图: