reptile7's JavaScript blog
Tuesday, February 07, 2006
 
Custom Pop-Up Boxes
Blog Entry #29

In the course of a quest to find out if ×, ÷, and various other mathematical symbols (specifically, those besides +, -, and =) can appear in alert box messages, I stumbled across the following sentence in the alert( ) method section of the window object page of Netscape's JavaScript 1.3 Client-Side Reference:

"You cannot specify a title for an alert dialog box, but you can use the open( ) method to create your own alert dialog box."

A light bulb switched on in my head as I grasped a missing link between the last few posts: "Aha! Here's how we can make custom pop-up boxes." In this entry, we'll show how we can use the window.open( ) and related commands to create alert, prompt, and confirm boxes that are not 'held hostage' by the limitations of the alert( ), prompt( ), and confirm( ) methods - boxes with custom titles, background colors, buttons, or other features limited perhaps only by your imagination. Appearing below is sample code for two examples: (1) a custom alert box, and (2) a hybrid prompt/confirm box whose "OK" and "Cancel" buttons, when clicked, trigger alternate functions.

A custom alert box

Here's my code, which makes use of the two windows-one document method for opening new windows outlined in HTML Goodies' JavaScript Primers #12:

<script type="text/javascript">
function custom_alert( ) {
var ale = window.open("", "", "width=430,height=170");
ale.document.open( );
ale.document.write("<html><head>");
ale.document.title = "Alert! Alert!";
ale.document.write("</head><body>");
ale.document.bgColor = "navy"; ale.document.fgColor = "white";
ale.document.write("<b>You don't have to settle for gray alert boxes anymore.</b>");
ale.document.write("<br><br><br><br><br><br><form>");
ale.document.write("<input type='button' style='position:absolute;left:325px;width:75px;border: medium double;' value='OK' onclick='window.close( );'>");
ale.document.write("</form></body></html>");
ale.document.close( ); }
</script>

Here's the output:


White on navy blue - a much nicer color scheme than the drab gray of an alert( ) box, eh? A curious aside: I was initially going to describe the alert( ) box color as "Soviet gray"; however, from a quick Google search I learned that there is actually a recognized color called "Soviet gray" whose hex code is "#434a4c" and that is a darker shade of gray than 'pop-up box gray,' whose hex code, I determine from the DigitalColor Meter utility on my iMac, is "#dedede".

I have positioned and bordered the "OK" button to give it a 'normal feel' with the following code:

style='position:absolute;left:325px;border: medium double;'

Check out HTML Goodies' "So, You Want Positioning, Huh?" and "CSS and Borders" tutorials for more information in this regard. Of course, only slight modifications of code are needed to left-justify or center the "OK" button, or to border it differently. Also, we can just as easily add color to the button's text or background, e.g.:

<form><input type='button' style='color:lime;background:crimson;' value='Click Here'></form>

gives:
(For those of you with an historical bent, Joe Burns' "So, You Want A Colored Link Button, Huh?" tutorial discusses the creation of colored buttons in the pre-CSS days.)

N.B. Speaking of 'normal' "OK" buttons, if you typically 'click' an "OK" button by hitting the return/enter key, as I do, well, that won't work here; on a custom pop-up box, to choose "OK" you'll have to either (a) actually click the "OK" button with the mouse cursor, or (b) use the tab key to bring focus to the "OK" button and then hit the return/enter key.

A hybrid prompt/confirm box

For this example, we'll use the two windows-two documents new window method of Primer #11.

In the opener document:
<script type="text/javascript">
window.open("custom_prompt1.html", "", "width=430,height=150,top=300");
</script>

custom_prompt1.html code:
<html><head>
<title>Hello There</title>
<script type="text/javascript">
function ok_true( ) {
window.alert("Welcome, " + document.forms[0].elements[0].value + ", to my way cool Web site!"); }
function cancel_false( ) {
window.alert("\"Cancel\" is not an acceptable response - try it again.");
window.opener.history.go(0); }
</script></head>
<body bgcolor="gold" style="text-align:center;">
Kindly tell us your first name:<p>
<form>
<input size="40"><p>
<input type="button" style="width:75px;border: medium double;" value="OK" onclick="ok_true( ); window.close( );">&nbsp;&nbsp;
<input type="button" style="width:75px;" value="Cancel" onclick="cancel_false( ); window.close( );">
</form></body></html>

Here's the output:



Everything is centered this time, courtesy of the style="text-align:center;" attribute-property-value in the <body> tag.

The "OK" and "Cancel" buttons of a prompt( ) box on my computer are aligned horizontally, with the "OK" button to the right of the "Cancel" button; I have reversed the button order in the example above, as it makes more sense to me to put the "OK" button 'first.' (DevGuru shows at its window.prompt( ) page that these buttons are aligned vertically on a PC, with the "OK" button appropriately on top.) Also, I have equalized the buttons' widths by putting style="width:75px;" in their respective <input> tags.

Unlike a prompt( ) box but like a confirm( ) box, the "OK" and "Cancel" buttons of the custom_prompt1.html box are set up to execute alternate units of code. Clicking the "OK" button triggers the ok_true( ) function, which incorporates the user's text box input, document.forms[0].elements[0].value, into a 'Welcome' message on an alert( ) box; after the alert( ) "OK" is clicked, the custom_prompt1.html window closes via the window.close( ) command that is also assigned to its "OK" button onclick event handler.

Clicking the custom_prompt1.html "Cancel" button triggers the cancel_false( ) function, which first pops up an alert( ) message and then reloads the opener page with the following command:

window.opener.history.go(0);

We made brief mention of the go( ) method of the history object in Blog Entry #19; I refer you to DevGuru's history.go( ) page for more information. In the "Cancel" button code, the cancel_false( ) function is again followed by a window.close( ) command that closes the original custom_prompt1.html window, with a new custom_prompt1.html window popping up from the reloading of the opener page.

The ok_true( ) and cancel_false( ) functions must be put in the openee document source code; if they're placed in the opener document source, then the "OK" and "Cancel" buttons won't recognize them. As a result, applying the two windows-one document method of Primer #12 to this example is a bit complicated, but is certainly doable - try it out below. We'll need to put the ok_true( ) and cancel_false( ) functions in a nested script (a script within another script), which in turn requires a programming trick that I don't quite understand - click here to display the code.

<title>Custom Pop-Up Boxes</title>

Welcome to the Custom Pop-Up Prompt Box Page.


The interesting part of the nested script is its last, curious line:

pro.document.write("</scr" + "ipt>");

My attempts to find on the Web reference material on nested JavaScript scripts were largely unsuccessful - Netscape's manuals don't have anything to say about them, for example - but at least this page, hosted by the School of Computing and I.T. at the University of Wolverhampton, notes: "The occurence of the string '</script>' within a script will, however, confuse [read: throw errors with] most browsers," which was certainly the case on my computer when I tried to end the nested script with pro.document.write("</script>");. The 'solution' is to split "</script>" in two - a trick I've taken from the script in the HTML Goodies "Hello Goodbye" tutorial and that I've also seen used in the source code of pop-up/under ads. Again, I can't tell you why pro.document.write("</scr" + "ipt>"); works and pro.document.write("</script>"); doesn't - perhaps someone more knowledgeable than myself can weigh in with an explanation...

March 2017 note:
If the nested </script> tag is intact, then the browser (a) interprets the tag as the end of the parent script element and (b) throws an "unterminated string literal" SyntaxError. An alternative way to get around this problem is to write the tag as <\/script> so as to escape its </ part.

That'll do it for this entry. Next up: Primer #14.

reptile7

Comments: Post a Comment

<< Home

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)