formating an alert box

lmarshall · 07-16-2003, 09:51 PM

Does any one know how to incorperate html in to an alert box?

I have the folowing for an Alert...

<SCRIPT>
<!--HIDE FROM INCOMPATIBLE BROWSERS
function click1 () {
alert ( '<h2>Brand Name, OE quality</h2>');
}
</SCRIPT>

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?

thanks,

lmarshall

Philip M · 07-16-2003, 10:03 PM

There is no way to alter the appearance of the alert, confirm and prompt boxes, or the logoptics in them.

lmarshall · 07-16-2003, 10: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, 10:14 PM

Yes, you can add line breaks. Just put \n into the text string any place you want a line break.

cheesebagpipe · 07-17-2003, 01: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...

joeframbach · 07-17-2003, 06: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, 07: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:-

http://javascript.internet.com/messa...ssage-box.html

Harry · 07-29-2003, 12:39 AM

Here is some code for creating custom JS prompts. Someone could probably modify it to make a custom alert





<HEAD>

<style type="text/css">



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; }



</style>

<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')

document.getElementsByTagName('body')[0].appendChild(promptbox)

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>"

document.getElementById("promptbox").focus()

}

function myfunction(value) {

if(value.length<=0)

return false;

else

document.getElementById('output').innerHTML="<b>"+value+"</b>";

}

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

</script>

<SCRIPT LANGUAGE="JavaScript">



</SCRIPT>

</HEAD>



<BODY>

<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>