Change alert box ok button text to close

Last Reply 7 days ago By dharmendr

Posted 7 days ago

How to change ok button text in alert box ? Is it possible in Asp.net?

You are viewing reply posted by: dharmendr 7 days ago.
Posted 7 days ago Modified on 7 days ago

Hi poonam,

Override the javascript window.alert() function.

Check this example.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #modalContainer
        {
            background-color: rgba(0, 0, 0, 0.3);
            position: absolute;
            top: 0;
            width: 100%;
            height: 100% !important;
            left: 0px;
            z-index: 10000;
            background-image: url(test.png); /* required by MSIE to prevent actions on lower z-index elements */
        }
        
        #alertBox
        {
            position: relative;
            width: 250px;
            min-height: 50px;
            margin-top: 50px;
            border: 1px solid #fff;
            background-color: #fff;
            background-repeat: no-repeat;
        }
        
        #modalContainer > #alertBox
        {
            position: relative;
        }
        
        #alertBox h1
        {
            margin: 0;
            font: bold 1em Raleway,arial;
            background-color: #f97352;
            color: #FFF;
            border-bottom: 1px solid #f97352;
            padding: 10px 0 10px 5px;
            text-align: center;
        }
        
        #alertBox p
        {
            height: 50px;
            padding-left: 5px;
            padding-top: 30px;
            text-align: center;
            vertical-align: middle;
        }
        
        #alertBox #closeBtn
        {
            display: block;
            position: relative;
            margin: 30px auto 10px auto;
            padding: 7px;
            border: 0 none;
            width: 70px;
            text-transform: uppercase;
            text-align: center;
            color: #FFF;
            background-color: #f97352;
            border-radius: 0px;
            text-decoration: none;
            outline: 0 !important;
        }
    </style>
    <script type="text/javascript">
        if (document.getElementById) {
            window.alert = function (txt) {
                CreateCustomAlert(txt, "Cancel", "Custom Alert");
            }
        }
        function CreateCustomAlert(txt, ALERT_BUTTON_TEXT, ALERT_TITLE) {
            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.innerHTML = txt;

            btn = alertObj.appendChild(d.createElement("a"));
            btn.id = "closeBtn";
            btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
            btn.href = "#";
            btn.focus();
            btn.onclick = function () {
                document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
                return false;
            }
            alertObj.style.display = "block";
        }
        window.onload = function () {
            alert('Thank you!');
        };
    </script>
</head>
<body>
    <div>
    </div>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html