You must Sign In to post a response.
  • Category: ASP.NET

    How to customized alert box in Jscript

    how to customized Confirm alert box in Jscript is it possible.
  • #652440
    <html>
    <head>

    <style type="text/css">
    .okButton {
    background-color: #D4D4D4;
    font-color: #000000;
    font-size: 9pt;
    font-family: arial;
    width: 70px;
    height: 20px;
    }
    .alertTitle {
    background-color: #3C56FF;
    font-family: arial;
    font-size: 9pt;
    color: #FFFFFF;
    font-weight: bold;
    }
    .alertMessage {
    font-family: arial;
    font-size: 11pt;
    color: #000000;
    font-weight: normal;
    }
    .alertBoxStyle {
    cursor: default;
    filter: alpha(opacity=90);
    background-color: #E4E4E4;
    position: absolute;
    top: 200px;
    left: 200px;
    width: 100px;
    height: 50px;
    visibility:hidden; z-index: 999;
    border-style: groove;
    border-width: 5px;
    border-color: #FFFFFF;
    text-align: center;
    }
    </style>
    </head>

    <body>
    <div id="alertLayer" class=alertBoxStyle></div>

    <script type = "text/javascript">

    var alertBox = document.getElementById("alertLayer").style

    function hideAlert(){
    alertBox.visibility = "hidden";}

    function makeAlert(aTitle,aMessage){
    document.getElementById("alertLayer").innerHTML = "<table border=0 width=100% height=100%>" +
    "<tr height=5><td colspan=4 class=alertTitle>" + " " + aTitle + "</td></tr>" +
    "<tr height=5><td width=5></td></tr>" +
    "<tr><td width=5></td><td width=20 align=left><img src='alert.gif'></td><td align=center class=alertMessage>" + aMessage + "<BR></td><td width=5></td></tr>" +
    "<tr height=5><td width=5></td></tr>" +
    "<tr><td width=5></td><td colspan=2 align=center><input type=button value='OK' onClick='hideAlert()' class=okButton><BR></td><td width=5></td></tr>" +
    "<tr height=5><td width=5></td></tr></table>";
    thisText = aMessage.length;
    if (aTitle.length > aMessage.length){ thisText = aTitle.length; }

    aWidth = (thisText * 5) + 80;
    aHeight = 100;
    if (aWidth < 150){ aWidth = 200; }
    if (aWidth > 350){ aWidth = 350; }
    if (thisText > 60){ aHeight = 110; }
    if (thisText > 120){ aHeight = 130; }
    if (thisText > 180){ aHeight = 150; }
    if (thisText > 240){ aHeight = 170; }
    if (thisText > 300){ aHeight = 190; }
    if (thisText > 360){ aHeight = 210; }
    if (thisText > 420){ aHeight = 230; }
    if (thisText > 490){ aHeight = 250; }
    if (thisText > 550){ aHeight = 270; }
    if (thisText > 610){ aHeight = 290; }

    alertBox.width = aWidth;
    alertBox.height = aHeight;
    alertBox.left = (document.body.clientWidth - aWidth)/2;
    alertBox.top = (document.body.clientHeight - aHeight)/2;

    alertBox.visibility = "visible";
    }

    // NB the image .alert.gif is required.

    </script>

    <center>

    <br><br><br>
    <input type=button value="Normal Alert" onClick="alert('A Standard Boring JavaScript Alert');">
    <br><br>
    <input type=button value="Customized Alert" onClick="makeAlert('Your Alert Title','Your Alert Message Goes Here<br>This script is very easy to use and<br>can easily be customised using CSS');">
    </center>

    </body>
    </html>

  • #652455
    The javascript alert box is a Predefined format changes in that format is not possible as it does not allow to do so.

    What you can do is can create your Own POPUP page with the setting you want to apply on the page and can open the page as a POPUP in the application.

    Thanks & Regards
    Anil Kumar Pandey
    Microsoft MVP, DNS MVM

  • #652534
    Hi,

    You may not be able to customize the default alert box in JavaScript but you can create your customized box using JavaScript.

    Please refer below links for sample code:

    www.codeproject.com/KB/scripting/DOMAlert.aspx
    jdstiles.com/java/jsalert.html


    Regards,
    Asheej T K


  • This thread is locked for new responses. Please post your comments and questions as a separate thread.
    If required, refer to the URL of this page in your new post.