js弹出alert对话框效果代码

     经过3个小时的努力,终于写出了合适自己的仿弹出警告的代码,用法:DIValert('要弹出的信息');

     在IE,FF和Chrome测试通过,不过在FF和Chrome下显示不是太好。 :P
// JavaScript Document
/**
    @Power by strouven
    homepage:http://blog.greycode.cn
*/
 
var bordercolor="#336699";
 
function DIValert(str){
 
document.documentElement.style.overflow='hidden';
 
window.scrollTo(0,0);
  
 
var bo document.getElementsByTagName('body')[0];
 
var ht document.getElementsByTagName('html')[0];
 
var boht document.createElement('div');   
 
boht.setAttribute('id','box'); 
 
boht.style.zIndex='1000';
  
document.body.appendChild(boht);  
  
bo.style.margin='0';
  
bo.style.height='auto';
  
bo.style.overflow='scroll';     
  
bo.style.height='100%';
  
bo.style.overflow='scroll';
  
ht.style.height='100%'
  
ht.style.height='auto';
  
  
var bg=document.createElement('div'); 
  
bg.setAttribute('id','bg');
  
bg.style.zIndex='1001';
  
bg.style.background='#000000';
  
bg.style.opacity='0.5';
  
bg.style.filter='alpha(opacity=50)';
  
bg.style.width='100%';
  
bg.style.height='100%';
  
bg.style.position='absolute';
  
bg.style.top='0';
  
bg.style.left='0';
  
document.getElementById('box').appendChild(bg);
  
  
var info=document.createElement('div');
  
info.setAttribute('id','info');
  
info.style.zIndex='1002';
  
info.style.width='300px';
  
info.style.height='200px';
  
info.style.top='50%';
  
info.style.left='50%';
  
info.style.position='absolute'
  
info.style.lineHeight='1.7';
  
document.getElementById('box').appendChild(info);
  
  
var center=document.createElement('div');
  
center.setAttribute('id','center');
  
center.style.position='absolute'
  
center.style.background='#fff';
  
center.style.border='1px solid #217AC1';
  
center.style.width='300';
  
center.style.height='100';
  
center.style.margin='-50px -150px';
  
document.getElementById('info').appendChild(center);
  
  
var strong=document.createElement('strong');
  
strong.style.display='block';
  
strong.style.padding='2px 5px';
  
strong.style.background='#EBF4FC';
  
strong.style.color=bordercolor;
  
strong.style.font='14px 宋体';
  
strong.innerHTML='友情提示:';
  
document.getElementById('center').appendChild(strong);
  
  
var p=document.createElement('p');
  
p.setAttribute('align','center');
  
p.style.font='12px 宋体';
  
p.innerHTML=str+'!';//'哈哈哈哈哈 哈哈哈!';
  
document.getElementById('center').appendChild(p);
  
  
var p1=document.createElement('p');
  
p1.setAttribute('id','btn');
  
p1.setAttribute('align','center');
  
p1.style.font='12px 宋体';
  
document.getElementById('center').appendChild(p1);
  
    
var button=document.createElement("input");
    
button.setAttribute("type","button");
    
button.setAttribute("value","确定");
    
button.setAttribute("align","middle");
    
button.style.width="60px";
    
button.style.align="center";
    
button.style.background=bordercolor;
    
button.style.border="1px solid "bordercolor;
    
button.style.color="white";
    
button.onclick=function(){
             
document.body.removeChild(boht);
             
        }
    
document.getElementById('btn').appendChild(button);
  
 



发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>