[rz] Modal Object

In this section you can announce self-made paid extensions.
*** THIS SECTION CONTAINS PAID EXTENSIONS ONLY ***
Post Reply
User avatar
[RZ]
 
 
Posts: 2166
Joined: Tue Nov 04, 2008 12:08 pm

[rz] Modal Object

Post by [RZ] » Tue Jun 30, 2020 7:05 am

[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: 1524
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom

Re: [rz] Modal Object

Post by zinc » Tue Jun 30, 2020 9:06 am

Oh! Possibilities!!! Great stuff! :D
Good news everyone! COVID-19 is STILL here!

User avatar
[RZ]
 
 
Posts: 2166
Joined: Tue Nov 04, 2008 12:08 pm

Re: [rz] Modal Object

Post by [RZ] » Tue Jun 30, 2020 9:13 am

thank you for your kind feedback

Post Reply