Custom Alert

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 style="cursor: pointer" onclick="create_custom_alert('Your text', '45')">custom alert</a> (demo)

The second parameter of the function specifies the distance in percentages of the custom alert box with respect to the window's borders. So the greater the distance, the smaller the alert box.

The custom alerts accept html. So you could have:

<a style="cursor: pointer" onclick="create_custom_alert('Your text<br><b>Your text in bold characters<\/b>', '45')">custom alert</a> (demo)

The alerts also accept css and javascript, but be careful in using it. As "create_alert('Your title', 'Your number')" already contains double quotes and single quotes, backslash escape characters and / or quots must be used inside the first parameter of the function in order to distinguish between characters and commands. A rather elaborate example:

<a style="cursor: pointer" onclick="create_custom_alert('<h4 style=\'text-align: center; \'>This is a custom alert.</h4>This is a custom alert.<br>It goes on top of windowed elements.<br>It\'s <span style=\'font-style: italic; color: darkred\'>styleable</span> and you can put javascript in it. Demo: click <a href=\'javascript: void(0)\' onclick=\'window.open("http://www.google.com"); return false\'>here</a> to open Google in a new tab or window.<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.', '34')">custom alert</a> (demo)

Important:
If you have a function some_function() somewhere on your page that you want to reference inside your custom alert box. you must use parent.some_function() there. That's because the alerts are created inside iframes, see script. Example:

Script:
<script>function open_google(){window.open('http://www.google.com')}</script>
Custom alert:
<a style="cursor: pointer" onclick="create_custom_alert('<br>Click <a href=\'javascript: void(0)\' onclick=\'parent.open_google(); return false\'>here</a> to open Google in a new window or tab.', '45')">custom alert</a> (demo)