The Modal component is a dialog box/popup window that is displayed on top of the current page.
Please note that it is not 100% compatible with the vector skin. You might be able to notice a slight "wobble" when activating the modal.
See also:
- Accordions consist of multiple collapsible elements
- A Jumbotron can also be used to emphasize content
- Cards, or collapses are another way to show/hide content.
<bootstrap_modal text="" [..]>Content of the modal</bootstrap_modal>The following attributes can be used inside the tag:
- class
- Adds this string to the class attribute of the component. If you want to add multiple classes, separate them by a space.
- color
- Sets the color for this component. See bootstrap's color documentation
(link below) for more information.
Allowed Values are
- default
- primary
- secondary
- success
- danger
- warning
- info
- light
- dark
- white
- footer
- All you supply here will be inserted into the footer area of the modal.
- header
- All you supply here will be inserted into the header area of the modal.
- id
- Sets the id of the component to this value. See to it, that it is unique.
- size
- You can choose a size for your modal. Possible options are:
- sm
- md (default)
- lg
- style
- Adds this string to the style attribute of the component. If you want to add multiple css styles, separate them by a semicolon.
- text
- This is a mandatory field.
If you supply text, a button will be generated and used as the trigger for the modal.
If you supply an image tag, it is stripped of any link tags and then be used as the trigger element.
- https://getbootstrap.com/docs/4.1/components/modal/
- https://www.w3schools.com/bootstrap4/bootstrap_modal.asp
- https://getbootstrap.com/docs/4.1/utilities/colors/
Please, see also the known issues with this component.