Javascript default browser alert overide

 Plugin for override javascript default browser alert. Add to any js and call the function with require arguments.

Code......\|/


/**
 * type:const; header:string; message:string
 */
INFO="info", WARNING="warning", ERROR="error"
function customAlert(type, header, message){
    window.onresize = resizeCheck;
    function resizeCheck()
    {
    winX = window.innerWidth;
    winY = window.innerHeight;
    modelX = (winX/2)-(350/2)+document.body.scrollLeft;
    modelY = (winY/2)-(160/2)+document.body.scrollTop;
    var _elm=document.getElementById('overlay');
    _elm.style.width=winX+"px";
    _elm.style.height=winY+"px";
    var _elm=document.getElementById('alert');
    _elm.style.left=modelX+"px";
    _elm.style.top=modelY+"px";
    }
    winX = window.innerWidth;
    winY = window.innerHeight;
    //alert(document.body.scrollTop);
    modelX = (winX/2)-(350/2)+document.body.scrollLeft;
    modelY = (winY/2)-(160/2)+document.body.scrollTop;
    winX+=document.body.scrollLeft;
    winY+=document.body.scrollTop;
    var overlay = document.createElement('div');
       overlay.setAttribute("id","overlay");
       overlay.setAttribute("class", "overlay");
       document.body.appendChild(overlay);

    var box = document.createElement('div');
       box.setAttribute("id","alert");
      
    if (type == INFO || type == ERROR ||type == WARNING)
    {
        box.innerHTML='<center><div id="alert2"><div class="header">'+ header+'</div><div class="message2">'+message+'</div><input class="ok1" id="ok1" type="button" value="OK" /></div></center>';
    }
    else
    {
        box.innerHTML='<center><div id="alert2"><div class="header">'+ header +'</div><div class="message2">'+message+'</div><input class="ok1" id="yes" type="button" value="Yes" /><input class="ok1" id="no" type="button" value="No" /></div></center>';
    }
    document.body.appendChild(box);  
    //css
    if (type == INFO)
    {
        style_header = ".header{float:left; width:97% !important; height:auto; background:#008afd; color:#FFF !important; margin-top:0px !important; padding: 0.5% 1.5% !important; text-align:left; -moz-box-shadow: inset 0px 0px 8px 2px #082d91; -webkit-box-shadow: inset 0px 0px 8px 2px #082d91; box-shadow: inset 0px 0px 8px 2px #082d91; font-weight:bold;";
    }
    else if (type == ERROR)
    {
        style_header = ".header{float:left; width:97% !important; height:auto; background:#f88e79; color:#FFF !important; margin-top:0px !important; padding: 0.5% 1.5% !important; text-align:left; -moz-box-shadow: inset 0px 0px 8px 2px #a60701; -webkit-box-shadow: inset 0px 0px 8px 2px #a60701; box-shadow: inset 0px 0px 8px 2px #a60701; font-weight:bold;";
    }
    else if (type == WARNING)
    {
        style_header = ".header{float:left; width:97% !important; height:auto; background:#fed42a; color:#FFF !important; margin-top:0px !important; padding: 0.5% 1.5% !important; text-align:left; -moz-box-shadow: inset 0px 0px 8px 2px #feac16; -webkit-box-shadow: inset 0px 0px 8px 2px #feac16; box-shadow: inset 0px 0px 8px 2px #feac16; font-weight:bold; -moz-text-shadow: 2px 2px 2px #afafaf; -webkit-text-shadow: 2px 2px 2px #afafaf; text-shadow: 2px 2px 2px #afafaf;";
    }
    else
    {
        style_header = ".header{float:left; width:97% !important; height:auto; background:#000; color:#FFF !important; margin-top:0px !important; padding: 0.5% 1.5% !important; text-align:left; font-weight:bold;";
    }
   
    var sheet = document.createElement('style')
    sheet.innerHTML = "#button2{float:left; width:auto; height:auto;} #alert2{float:left; width:450px; height:auto;} .overlay {background-color: #000; opacity: .5; filter: alpha(opacity=70); position:fixed; top: 0; left: 0; width:"+winX+"px; height: "+winY+"px; z-index: 99999;} #alert {width:auto; height:auto; background:#f2f2f2; position:fixed; left: "+modelX+"px;top: "+modelY+"px; z-index: 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px; border:1px; box-shadow:1px 2px 5px #676767;border: 3px solid #77a22f; -moz-box-shadow: 0 0 8px 5px #E4E4E4 inset; -webkit-box-shadow: 0 0 8px 5px #E4E4E4 inset; box-shadow: 0 0 8px 5px #E4E4E4 inset;} .ok1 {margin: 10px !important; cursor:pointer; color:#FFF; font:bold 13px; text-transform:uppercase; border:none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px; background:#C2D82E; width: 60px; height: auto; padding: 5px; -moz-box-shadow: inset 0px 0px 8px 2px #94A51F; -webkit-box-shadow: inset 0px 0px 8px 2px #94A51F; box-shadow: inset 0px 0px 8px 2px #94A51F;} .ok1:hover {background:#D1E92D; -moz-box-shadow: 0 0 8px 2px #B8CE24 inset; -webkit-box-shadow: 0 0 8px 2px #B8CE24 inset; box-shadow: 0 0 8px 2px #B8CE24 inset; color:#000;} #alert2 div {font:18px; color:#000; display:inline-block; margin-top:10px; float:left; width:100%; height:auto;}" + style_header;
    document.body.appendChild(sheet);
   
    var element=document.getElementById("ok1");
    element.addEventListener('click',resume,false)
   
    function resume()
    {
        document.body.removeChild(overlay);
        document.body.removeChild(box);
        document.body.removeChild(sheet);
    }
}

IF any improvements....Welcome....

Happy Hacking ;)