widgets.pbModalContainer.help.html Maven / Gradle / Ivy
Use this container to create a pop-in window which can be opened or closed with a button, and displayed over the page, form, or layout content.
To control modal containers, the following methods are available in a button:
- Open Modal
- Close Modal
Add a modal ID, as the button will need to open the right modal container. This ID must be unique within a given page, form, or layout.
A modal container doesn't work when it is embedded in another container.
In a form, a page, or a layout, we recommend to drop modal containers at the bottom of the editor content.
To embed a pop-in into another pop-in at runtime, drop the first modal container at the bottom, drop the second modal container below the first one, and drop the button that opens the second pop-in within the first modal container.
To open a modal window it is enough to input a modal ID in the properties, to create a button,
select Open modal in the Action property, and fill in the right modal ID. The button should be
located outside of the modal container.
To close a modal window, put a button inside the modal that you wish to close and select the Close
modal action.
This modal is based on ui-bootstrap implementation. It is possible to change the size or the style
of the modal.
Size
The modal size can be selected in the container Size properties. Options available are small,
medium or large, which will control the width of the modal.
Style
The modal style can be improved by using the modal-body specific class into the CSS
Classes property field.
Another possibility would be adding different containers inside the modal and specify any of the
following classes:
modal-header
modal-body
modal-footer
Animation
It is possible to deactivate the animation when the modal appears. The main usage of this option would be to create a wizard, where several modal containers are displayed in a sequence.