habibjutt
12/24/2015 - 6:44 PM

JS Custom Alert Box.js

#modalContainer {
    background-color:rgba(0, 0, 0, 0.3);
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:10000;
}

#alertBox {
    position:relative;
    width:400px;
    min-height:100px;
    margin-top:150px;
    border-radius: 10px;
    /*border:1px solid #666;*/
    background-color:#fff;
    -webkit-box-shadow: 0px 3px 24px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 3px 24px -2px rgba(0,0,0,0.75);
    box-shadow: 0px 3px 24px -2px rgba(0,0,0,0.75);
}

#modalContainer > #alertBox {
    position:fixed;
}
#alertBox h1 {
    margin:0;
    font-family: Georgia;
    background-color:#0073aa;
    color:#FFF;
/*    border-bottom:1px solid #000;*/
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 12px;
    font-weight: normal;
    letter-spacing: 1px;
    word-spacing: 2px;
}

#alertBox p {
    height:50px;
    padding-left:5px;
    font-size: 16px;
/*    margin-left:55px;*/
    text-align: center;
    font-family: Georgia;
}

#alertBox #closeBtn {
    font-family: Georgia;
    display:block;
    position:relative;
    margin:5px auto;
    margin-bottom: 20px;
    padding:7px;
    width:70px;
    text-transform:uppercase;
    text-align:center;
    color:#FFF;
    background-color:#0073aa;
    text-decoration:none;
    border-radius: 5px;
}
var ALERT_TITLE = "WMSAC MESSAGE BOX !";
var ALERT_BUTTON_TEXT = "Ok";

if(document.getElementById) {
    window.alert = function(txt) {
        createCustomAlert(txt);
    }
}

function createCustomAlert(txt) {
    d = document;

    if(d.getElementById("modalContainer")) return;

    mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
    mObj.id = "modalContainer";
    mObj.style.height = d.documentElement.scrollHeight + "px";

    alertObj = mObj.appendChild(d.createElement("div"));
    alertObj.id = "alertBox";
    if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
    alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
    alertObj.style.visiblity="visible";

    h1 = alertObj.appendChild(d.createElement("h1"));
    h1.appendChild(d.createTextNode(ALERT_TITLE));

    msg = alertObj.appendChild(d.createElement("p"));
    //msg.appendChild(d.createTextNode(txt));
    msg.innerHTML = txt;

    btn = alertObj.appendChild(d.createElement("a"));
    btn.id = "closeBtn";
    btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
    btn.href = "#";
    btn.onclick = function() { removeCustomAlert();return false; }

    alertObj.style.display = "block";

}

function removeCustomAlert() {
    document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}