Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to customize an alert box [ASAP!]

    Hi,

    i need to make my alert box stand out a bit more i have looked everywhere but can't find anything! i was looking to do stuff like Bold, Italics, Underline, Fonts, Sizes, Borders, Backgrounds maybe something that flashed!

    i'm not asking you to do it for me just tell me how and were to put the different codes!

    and ASAP please as it is in for Thursday!! :S

    thanks in advance
    :D

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    It is not possible to customise the standard alert, prompt and confirm boxes.


    Google for modal dialog box to see some alternatives.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    This example may suit your needs:-

    Code:
    <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="Click Here For A Normal JavaScript Alert" onClick="alert('A Standard Boring JavaScript Alert');">
    <br><br>
    <input type=button value="Click Here For A More Attractive 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>

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •