Recommended modules:
- bootstrap_external_link_popup
- paragraphs
- field_group_bootstrap
These will allow each of the following methods to render correctly
Modals can be displayed in multiple ways.
- Via "Bootstrap modal" fieldgroups on display modes.
- Example included via a modal paragraph type
- Via twig templates
- example included for datacards
- bootstrap_external_link_popup
- Renders a bootstrap modal when clicking a link that leaves the site
Modals comprise of 2 core parts, a modal trigger, and modal contents
How you define each of those is up to you and what your usecase is, but suggestions are included in the examples
Simple modal via fieldgroups
Requires the Bootstrap Fieldgroup module to be installed and enabled.
In our example this modal is triggered using a Modal paragraph with these fields (you can use other entities with the same setup):
- field_modal_contents:
- This field is a multi-value paragraphs field, wrapped in a "Bootstrap Modal" Field group.
- Any content type can use this fieldgroup type, and it will display the contents of this field. This fieldgroup is the minimum required setup for a modal to trigger. The field group itself allows you to set a title for inside the modal, and a title on the modal trigger button,
- field_modal_button_text (optional):
- The template for the modal fieldgroup has been modified to look for a field with this name, if it is present, it will override the default text of the button (from the fieldgroup setting), with the value set on the content item in this field. This allows a per-node modal button label.
- field_modal_title:
- By default the modal title will use the setting for the fieldgroup, ovverridden with the content title if a content item is embedded via a node reference, and lastly, override with the value of this field if it is present
Modal
Within twig
Here's a custom implementation of the modals, using twig files for the dataset entity when rendered as a datacard.
It checks for links on the dataset for it to link to, if there are none, it will instead render a modal of the details on the datacard entity.
It pulls the content from the configurable Modal display mode on the dataset entity.