Show Flash   Hide Flash

Custom alerts


This page contains a script for creating custom alerts. The custom alerts go over windowed elements (like Flash objects), except in Safari. Demos: click on a demo-link below, then click on 'Show Flash' (top left).

If you want custom alerts too, put this in the head of your page. Then in the body write links like:
<a href="javascript: void(0)" onclick="create_alert('Your title', 'Your text'); return false" >custom alert</a> (demo)

The custom alerts accept html. So you could have:
<a href="javascript: void(0)" onclick="create_alert('Your title', 'Your text<br><b>Your text in bold letters</b>.'); return false" >custom alert</a> (demo )

The alerts also accept css and javascript, but be careful in using it. As "create_alert('Your title', 'Your text'); return false" already contains double quotes and single quotes, backslash escape characters must be used inside 'Your title' and / or 'Your text' in order to distinguish between characters and commands. Moreover, the way our script is set up makes certain combinations of quotes and text impossible. So as a general rule, it is a good thing to avoid quotes as much as you can in the code you want to put in the alerts (implying that you must remove white space in the code). To avoid quotes in javascript, we could write it outside an alert first (in the form of a function) and then reference it inside the alert, like this:
Head of the page, something like:
<script>function open_google(){window.open('http://www.google.com'); return false}</script>
Custom alert:
<a href="javascript: void(0)" onclick="create_alert('Custom alert containing link to Google', '<a style=color:red href=javascript:void(0) onclick=parent.open_google()>This</a> link opens Google in a new tab or window'); return false">custom alert</a> (demo)
(for parent., see below)

In cases where you can't avoid quotes completely, use \\\'. Example:
<a href="javascript: void(0)" onclick="create_alert('Custom alert containing link to Google', '<a style=color:red href=javascript:void(0) onclick=window.open(\\\'http://www.google.com\\\');return false>This</a> link opens Google in a new tab or window'); return false">custom alert</a> (demo)

Note that we must use parent for referencing the scripts written outside the alerts (see above). That's because the alerts are created inside iframes, see script.


© Arie Molendijk, mesdomaines.nu