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

Last Reply one year ago By dharmendr

Posted one year ago

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 one year ago.
Posted one year ago
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);