[rz] Modal Object
Posted: 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!
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!
