What you get from this video is a dialog that opens from a button you label yourself, holds whatever content you nest inside it, and closes the way a dialog is supposed to close.
Four content fields, two of them required
- Modal Button — required. This is the visible trigger on the page, and its wording is the whole of the invitation, so "See the delivery options" beats "Click here".
- Modal Title — optional, and it becomes the dialog's accessible name.
- Modal Body — required, and it nests other paragraphs. A layout bundle, an image, a form: anything the suite provides can live inside the dialog.
- Modal Footer — optional, also nested, and the natural home for a confirm or cancel row.
Opening and closing behaviour
The dialog is built to the WAI-ARIA dialog pattern rather than to a plausible imitation of one. While open it carries role="dialog" and aria-modal="true", Escape closes it, Tab and Shift+Tab stay trapped inside it, clicking the backdrop closes it, and focus returns to the button that opened it. That last detail is the one hand-rolled modals almost always drop, and it is the one that strands keyboard users at the top of the page.
The entrance animation
Animated Modal offers six choices — zoom, or a slide in from the top, bottom, left or right, or a plain opacity fade. Pick one deliberately; a dialog that flies in from the left every time becomes tiresome by the third visit.
Background Color is required on this bundle, unlike most of its siblings, and that is sensible: a dialog with a transparent panel is unreadable over whatever it covers. Max Width, borders, radius, shadow and spacing behave as they do everywhere else in the suite.
Getting it running
drush en paragraph_bundle_modal -y
drush cr
It needs Drupal ^11.3 || ^12, plus Paragraphs and Entity Reference Revisions for the nested content. Test it with the keyboard before you ship it — open, Tab to the end, Escape, and check where focus lands. More on the Paragraphs Bundles module page.
Need this built into your own site? See Drupal development services, or request a quote.
