自制div弹出样式

window.onload=function(){


myalert("你好1",3); 

myalert("你好2",1); 


function myalert(value,time=3){

var alertbox=document.getElementById('alertbox');

if(!alertbox){document.write('<div id="alertbox"></div>');}

var alertbox=document.getElementById('alertbox');

alertbox.innerHTML=alertbox.innerHTML+'<div id="" class="alert" style="display:none; border-radius:5px;width:94px;'+

'padding:5px;min-height:30px;line-height:30px;color:#ffffff;background-color:#009933;border:3px #003399 solid;'+

'font-size:14px;font-weight:bold;position:fixed;text-align:center;overflow:hidden;z-index:999;cursor: pointer;'+

'"></div>';

var alertnum=alertbox.getElementsByClassName("alert").length - 1;

var htmlheight=document.documentElement.clientHeight;

var htmlwidth=document.documentElement.clientWidth;

var ownalert=alertbox.getElementsByClassName("alert")[alertnum];

ownalert.id="alert"+alertnum;

ownalert.style.display="block";

ownalert.zIndex=999+alertnum;

ownalert.innerHTML=value;

 ownalert.style.top=0.5*(htmlheight-ownalert.clientHeight)+30*alertnum;

ownalert.style.left=0.5*(htmlwidth-ownalert.clientWidth)+30*alertnum;

setTimeout(function(){

str='<script>document.getElementById("alert'+alertnum+

'").addEventListener("click",function(){document.getElementById("alert'+alertnum+

'").style.display="none";})</script>';

mywrite(str);

str='<script>var alerttime'+alertnum+'='+time+";"+

'setTimeout(function(){'+

'document.getElementById("alert'+alertnum+'").style.display="none";'+

'},1000*alerttime'+alertnum+');</script>';

mywrite(str);

},1000); 

}


function mywrite(value){

document.write(value);}


function mylog(value){

console.log(value);}


}


TOP