Now I'm not usually one to replace browser features, as I believe that the browser and the web page should be kept separate, much as the structure and the presentation should be kept separate. However, when it comes to browser message popups, there really is no alternative but to replace them. They're ugly, unskinnable, and can really ruin what would otherwise be a good page.
The code is pretty simple, and most of it is just bulk to generate and manipulate elements in the DOM, so it doesn't need explaining. However, I feel the usage of the code does require some explanation, and presents a nice opportunity for another example page.
This, too goes into the page's
<head> element, but after the inclusion of the general library. On my website, I have moved site-specific popup message functions into a separate popup_message_custom.js file and included it, but this is by no means a requirement.
The final inclusion is of the CSS file. This file should obviously be customised to your own tastes and site design, but the default design is pretty neutral. This is included with the following markup (once again in the
<link href="http://tecnocode.co.uk/sources/client/popup_message.css" rel="stylesheet" media="all" type="text/css" />
Now we get onto the actual calling of the functions necessary to create a popup message. You can call the following function anywhere you like to create a popup message, but a sensible place to put it would be in the
onclick event of a link, or something else:
Here, you would obviously replace
window title with the popup message's required title, and
However, in some circumstances, you might not know if the file has been included or not, and in any case, for backwards-compatibility, it is preferable to use the window.alert("message"); function instead of the script-specific function described above:
||The original, unmodified browser popup message creation function, or a reference to
||The custom popup message creation function, which creates a whole new element tree, and displays it on the page. Always returns false.|
||The function to destroy (remove) a visible popup message. It should not be called by any custom code unless you really know what you're doing.|
|Class / ID||Description||Applicable element(s)||Descriptive image|
||The main popup message "window" element.||
||The title of the popped-up message.||
||The container for the message.||
||The "OK" button used to dismiss the popup message.||
A final note must be about the files I've provided. If you do use this script (and the CSS), please download it and host it with your website; do not leech my bandwidth! Additionally, please follow the terms of the license — I'm giving you something, and I only ask for a little in return.