...
PDA

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...:cool:
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/messages/QLib/amazing-message-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


<!-- TWO STEPS TO INSTALL CUSTOMIZABLE JAVASCRIPT PROMPT:



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



<HEAD>




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



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

<!--

function callPrompt(){

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

}

//-->

</SCRIPT>

</HEAD>



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



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

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum