Javascript Alert Box Customization

Posted by on

Sometimes you need to customize alert box in application to match page theme, this can be achieved by below code:-
 

Place this code in your master page or common files to apply this throughout application, or in case if you want to apply this on particular page, then you place this code on that page only.



<script>
    //Alert Box customization scripts//
    if (document.getElementById) {
        window.alert = function (msg) {
            CreateCustomAlert(msg);
        }
    }

    function CreateCustomAlert(msg) {
        debugger
        //Check for open alert
        if (document.getElementById("divModalContainer"))
            return;

        modelObj = document.getElementsByTagName("body")[0].appendChild(document.createElement("div"));
        modelObj.id = "divModalContainer";
        modelObj.style.height = document.documentElement.scrollHeight + "px";

        alertObj = modelObj.appendChild(document.createElement("div"));
        alertObj.id = "divAlertBox";
        if (document.all && !window.opera)
            alertObj.style.top = document.documentElement.scrollTop + "px";

        alertObj.style.left = (document.documentElement.scrollWidth - alertObj.offsetWidth) / 2 + "px";
        alertObj.style.visiblity = "visible";

        //Add alert box title if needed
        //h1 = alertObj.appendChild(document.createElement("h1"));
        //h1.appendChild(document.createTextNode("This is custom alert box"));

        msgObj = alertObj.appendChild(document.createElement("p"));
        msgObj.innerHTML = msg;

        btn = alertObj.appendChild(document.createElement("a"));
        btn.id = "BtnOk";
        //You can change alert button, "OK" text as per your requirement
        btn.appendChild(document.createTextNode("OK"));
        btn.href = "#";
        btn.onclick = function () { CloseCustomAlert(); return false; }

        //Add clss of button you are using in your page theme if any
        $('#BtnOk').addClass('btn btn1');

        alertObj.style.display = "block";
    }
    //To Close Alert on OK Click
    function CloseCustomAlert() {
        document.getElementsByTagName("body")[0].removeChild(document.getElementById("divModalContainer"));
    }
</script>




In addition to this you need to apply styles for customization

<style>
    #divModalContainer {
        background-color: rgba(0, 0, 0, 0.3);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 900000;
        background-image: url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */
    }

    #divAlertBox {
        position: relative;
        width: 20%;
        min-height: 20%;
        margin-top: 10%;
        border: 1px solid #666;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: 20px 30px;
        text-align: justify;
        border-left: 20px solid #1fa1cf;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    }

    #divModalContainer > #divAlertBox {
        position: fixed;
    }


    #divAlertBox p {
        font: inherit;
        min-height: 20px;
        text-align: left;
        padding: 15% 0 5% 5%;
        color: #000000;
        font-size: 16px;
        margin: 0;
    }

    #divAlertBox #BtnOk {
        margin: 5px auto 25px 5%;
    }
</style>



So this was code, and alert box will look like below image:-


Comments

Post a Comment