Customize JavaScript Alert Message Box like Bootstrap Alert in ASP.Net

Last Reply on Dec 12, 2017 05:36 AM By dharmendr

Posted on Dec 12, 2017 04:21 AM

Hello Everyone,

I'm using system alert in the code behind page with following CSS and Scripts but new line is not working with the alert message.

Any solution for this. 

<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%;
            left: 0px;
            z-index: 10000;
            background-image: url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */
        }
        
        #alertBox
        {
            position: relative;
            width: 33%;
            min-height: 100px;
            max-height: 400px;
            margin-top: 50px;
            border: 1px solid #fff;
            background-color: #fff;
            background-repeat: no-repeat;
            top: 30%;
        }
        
        #modalContainer > #alertBox
        {
            position: fixed;
        }
        
        #alertBox h1
        {
            margin: 0;
            font: bold 1em Raleway,arial;
            background-color: #f97352;
            color: #FFF;
            border-bottom: 1px solid #f97352;
            padding: 10px 0 10px 5px;
        }
        
        #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;
        }
        
        /* unrelated styles */
        
        #mContainer
        {
            position: relative;
            width: 600px;
            margin: auto;
            padding: 5px;
            border-top: 2px solid #fff;
            border-bottom: 2px solid #fff;
        }
        
        h1, h2
        {
            margin: 0;
            padding: 4px;
        }
        
        code
        {
            font-size: 1.2em;
            color: #069;
        }
        
        #credits
        {
            position: relative;
            margin: 25px auto 0px auto;
            width: 350px;
            font: 0.7em verdana;
            border-top: 1px solid #000;
            border-bottom: 1px solid #000;
            height: 90px;
            padding-top: 4px;
        }
        
        #credits img
        {
            float: left;
            margin: 5px 10px 5px 0px;
            border: 1px solid #000000;
            width: 80px;
            height: 79px;
        }
        
        .important
        {
            background-color: #F5FCC8;
            padding: 2px;
        }
        
        @media (max-width: 600px)
        {
            #alertBox
            {
                position: relative;
                width: 90%;
                top: 30%;
            }
    </style>
    <script type="text/javascript">
        var ALERT_TITLE = "";
        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.focus();
            btn.onclick = function () { removeCustomAlert(); return false; }

            alertObj.style.display = "block";

        }

        function removeCustomAlert() {
            document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
        }
        function ful() {
            alert('Alert this pages');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    </form>
</body>
</html>

C#

protected void Page_Load(object sender, EventArgs e)
{
    ClientScript.RegisterClientScriptBlock(this.GetType(), "", "alert('Wrong Answer!\\n Applying hand hygiene will not sterilize the skin, it will reduce number of microorganisms from the hand and the hands will not be pool of microorganism')", true);
}

 

You are viewing reply posted by: dharmendr on Dec 12, 2017 05:36 AM.
Posted on Dec 12, 2017 05:36 AM
irshad1231 says:
ClientScript.RegisterClientScriptBlock(this.GetType(), "", "alert('Wrong Answer!\\n Applying hand hygiene will not sterilize the skin, it will reduce number of microorganisms from the hand and the hands will not be pool of microorganism')", true);

 Replace above with below. Use <br />

ClientScript.RegisterClientScriptBlock(this.GetType(), "", "alert('Wrong Answer!<br /> Applying hand hygiene will not sterilize the skin, it will reduce number of microorganisms from the hand and the hands will not be pool of microorganism')", true);