[rz] Modal Object

This section contains extensions that were created by [rz] who has sadly passed away.
These extensions are no longer available, but the discussions may still be helpful for some users.
Forum rules
*** IMPORTANT INFO REGARDING [RZ] EXTENSIONS ***

This section contains extensions that were created by [rz] who has sadly passed away.
These extensions are no longer available or supported, but the discussions may still be helpful for some users.
Locked
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

[rz] Modal Object

Post by [RZ] »

[rz] Modal Object v1.0

This extension is the perfect companion for the [rz] Alert and [rz] Confirm extensions.
It allows you to convert almost any element (usually layers) into a modal object that is opened using a standard link or other object that accepts events.
Cross-browser and backward compatible.
Sample included!

Some features:

- Built-in close button (it can be replaced with any other element that accepts events).
- Custom back color and opacity.
- Specific time for fade-in and fade-out (open and close cycles).
- Multi-instance to allow several objects conversion within the same page.
- RWD and fluid support.
- Lightweight, no jQuery required.

...and more!


HTML 4.01 Transitional
W3C compliant


DEMO


How to use?

1. Design your page as you usually do.
2. Design your element to convert it to modal.
3. In the page add a standard link to open the modal element (*).
4. Drag and drop an extension instance and enter the name of the element to convert.
5. Optionally, setup the appearance of the button that best fits your design scheme.
6. Preview or publish.

How to add a link to open the modal element?

1. Add a text or any other element that accepts links/events.
2. Open the element properties dialog.
3. Click on the Events tag to open it.
4. In the Event dialog box select:
- Event: onclick
- Action: run JavaScript
- JavaScript: enter the function call i.e: MyInstance.open();
(replace MyInstance with the actual instance name)

How to add a link to close the modal element? (optional)

1. Add a text or any other element that accepts links/events within the modal element.
2. This element should be the topmost element within the layer (the last one in the z-order).
3. Open the element properties dialog.
4. Click on the Events tag to open it.
5. In the Event dialog box select:
- Event: onclick
- Action: run JavaScript
- JavaScript: enter the function call i.e: MyInstance.close();
(replace MyInstance with the actual instance name)

Enjoy!
User avatar
zinc
 
 
Posts: 2146
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom
Contact:

Re: [rz] Modal Object

Post by zinc »

Oh! Possibilities!!! Great stuff! :D
Running WYSIWYG Web Builder since 2007...
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Modal Object

Post by [RZ] »

thank you for your kind feedback
Locked