View Full Version : formating an alert box

07-16-2003, 10:51 PM
Does any one know how to incorperate html in to an alert box?

I have the folowing for an Alert...

function click1 () {
alert ( '<h2>Brand Name, OE quality</h2>');

But it does not show a up in an H2 format

Also is there a way that you can get rid of the exclamation mark in the yellow triangle?



Philip M
07-16-2003, 11:03 PM
There is no way to alter the appearance of the alert, confirm and prompt boxes, or the logoptics in them.

07-16-2003, 11:08 PM
Is there a way to add line breaks though?

I have a list of things I want to show up in a message box when the user clicks on a link.. Is there a way to get them each on a sperate line?

Roy Sinclair
07-16-2003, 11:14 PM
Yes, you can add line breaks. Just put \n into the text string any place you want a line break.

07-17-2003, 02:00 AM
You can also add tabs (\t), and various characters:

| _ - = ~ :

...etc., to dress things up a bit.

Philip M: what's a logoptic? Great word...:cool:

07-17-2003, 07:01 AM
you can do other things, though. i've seen some very nifty things done, but i dont have a clue where. but its easy to make.

make a <div> with a z-index higher than the rest of the page, and use an alpha-transperancy to fade out the rest of the page. a <div> with a z-index exceeding the previous <div> pops up with the message. looking like an alert box with (of course) a button that returns you to the page.

if i have some time later tonight i'll make it and post it.

Philip M
07-17-2003, 08:32 AM
Hi Cheesebagpipe! A logoptic is my own invented portmanteau word for icons, logos, atavars, smilies and other little pictures which adorn text messages.

LMarshall - you may care to look at:-


07-29-2003, 01:39 AM
Here is some code for creating custom JS prompts. Someone could probably modify it to make a custom alert


1. Copy the coding into the HEAD of your HTML document

2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->


<style type="text/css">

<!--/*************************** below code can be in a css file *****************************/-->

input.prompt {border:1 solid transparent; background-color:#99ccff;width:70;font-family:arial;font-size:12; color:black;}

td.titlebar { background-color:#FF9F40; color:#0000D2; font-weight:bold;font-family:arial; font-size:12;}

table.promptbox {border:1 solid #ccccff; background-color:#FFFFE6; color:black;padding-left:2;padding-right:2;padding-bottom:2;font-family:arial; font-size:12;}

input.promptbox {border:1 solid #0000FF; background-color:white;width:100%;font-family:arial;font-size:12; color:black; }

<!--/*************************** end css file *****************************/-->


<script language='javascript'>

/*************************** below code can be in a js file *****************************/

var response = null

function prompt2(promptpicture, prompttitle, message, sendto) {

promptbox = document.createElement('div');

promptbox.setAttribute ('id' , 'prompt')


promptbox = eval("document.getElementById('prompt').style")

promptbox.position = 'absolute'

promptbox.top = 100

promptbox.left = 200

promptbox.width = 300

promptbox.border = 'outset 1 #bbbbbb'

document.getElementById('prompt').innerHTML = "<table cellspacing='0' cellpadding='0' border='0' width='100%'><tr valign='middle'><td width='22' height='22' style='text-indent:2;' class='titlebar'><img src='" + promptpicture + "' height='18' width='18'></td><td class='titlebar'>" + prompttitle + "</td></tr></table>"

document.getElementById('prompt').innerHTML = document.getElementById('prompt').innerHTML + "<table cellspacing='0' cellpadding='0' border='0' width='100%' class='promptbox'><tr><td>" + message + "</td></tr><tr><td><input type='text' id='promptbox' onblur='this.focus()' class='promptbox'></td></tr><tr><td align='right'><br><input type='button' class='prompt' value='OK' onMouseOver='this.style.border=\"1 outset #dddddd\"' onMouseOut='this.style.border=\"1 solid transparent\"' onClick='" + sendto + "(document.getElementById(\"promptbox\").value); document.getElementsByTagName(\"body\")[0].removeChild(document.getElementById(\"prompt\"))'> <input type='button' class='prompt' value='Cancel' onMouseOver='this.style.border=\"1 outset transparent\"' onMouseOut='this.style.border=\"1 solid transparent\"' onClick='" + sendto + "(\"\"); document.getElementsByTagName(\"body\")[0].removeChild(document.getElementById(\"prompt\"))'></td></tr></table>"



function myfunction(value) {


return false;




/*************************** js file code *****************************/




function callPrompt(){

prompt2('btn1p.gif', 'My Prompt','Please enter your name ,if you want to chat with our <B>customer support executive</B>', 'myfunction');





<!-- STEP TWO: Copy this code into the BODY of your HTML document -->


<input type="button" value='show prompt' onClick="callPrompt()"> </CENTER>

<div id="output" style="position:absolute;background-color:#FFFFCC;width:200;height:50;left:300;top:150;border:1 solid #FF8000;color:#0000F2"></div>