Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Alert

The most lightweight solution to have a custom alert-box in your website that fits the design,
scheme and colors!
This extension replaces the standard alert() function without any change in your code (yes, no changes required) and  automatically works with the wb's native javascript form validation; even in (almost?) any other scenario that alert() is invoked.
It is cross-browser compatible and even supports old ones, tested in all major browsers and touch devices.
Sample project included.

HTML 4.01 Transitional
W3C compliant


* Just a brief about some of the changes that were made lately...

* New in version

- Improved alignment uniformity across platforms including mobiles.

* New in version

- Improved interaction with [rz] Button extension when it has i.e. 'push' effects.

* New in version 1.2.2

- Improved modal handling with less resources and better interacts with other extensions.
- Improved backward compatibility.

* New in version 1.2.1

- Improved the timed messages handling when the alert box is closed manually.
- The core has been moved to an external file for a faster navigation between pages.
- Minor core tweaks.

* New in version 1.2

- Optional timed messages:
  alert('my message'); or alert('my message', 0); for the usual behavior.
  alert('my timed message', 5000); i.e: the alert box will be closed after 5 seconds (any other value in milliseconds
  can be entered).
- Optionally hides the close button in timed messages.
- Optional extra layer-rearrangements on timed messages with hidden close button.

* New in version 1.1

- Added support for RWD.
- Improved message box positioning.

* New in version

- The alert box can be displayed outside an inline frame (useful for embedded forms with validation rules).
- Improved modal mode simulation.
- Allow or disallow drag/select the alert box elements.
- New extension: [rz] Alert (ifr) - connects with the alert's elements that are placed outside the contained page.

How to use?

1. Design a layer as you usually do (will be used as the new alert-box layout).
2. Add text object within the layer and setup the font type and the color (will be used
    to display the message).
3. Add a button (or a similar object - it will be used to close the alert message).
4. Drag and drop the [rz] Alert extension and put it on top (the last object you add).
5. Open the extension properties dialog and enter the layer id, the text object id and the button id.
6. Optionally, you can add other decorative elements to the layer.
7. Optionally, you can fine-tune the screen-cover color, the fade-in/out effect, etc.

Timed messages:

From version 1.2 and later, you can display an alert box in two modes:
alert('my message'); or alert('my message', 0); for the usual behavior.
alert('my message', 5000); the message will be shown five seconds and then the box will be automatically dismissed (replace the value -expressed in milliseconds- according to the time you want).

Extended use:
alert(string[, milliseconds]);

Inlines frames:

If a form is called from a parent page, follow the same steps as described; just put the alert elements in the "caller" page instead of in the embedded page. And in the embedded page (i.e. a php form), just drag and drop the [rz] Alert (ifr) extension.

w3c compliant
© 2012-20 by MAGNA web studio • all rights reserved

new shop with