By jrockowitz on
Change record status:
Published (View all published change records)
Project:
Introduced in branch:
8.x-5.x
Introduced in version:
8.x-5.0-rc13
Issue links:
Description:
Drupal core provides a dialog API which makes it possible to open any form in a modal dialog. Drupal's dialog API requires specific libraries to be preloaded, data-dialog* attributes and a general understanding of JSON.
The Webform module now makes it easy to open any webform in a modal dialog using predefined dialog options using the .webform-dialog and .webform-dialog-OPTIONS classes.
For example, the below HTML will open the default Contact form in a 600-pixel wide modal dialog.
<a href="/form/contact" class="webform-dialog webform-dialog-narrow button">Open Contact</a>
Notes
- IMPORTANT: To insert dialog links using the Basic HTML and Restricted HTML text formats the must be added to the allowed HTML tags.
- When enabled, the webform dialog library will be added to every page on your website.
- Webform specific dialog links will be included on all webform settings form.
- To add the .webform-dialog class to a link's attributes, please use the D8 Editor Advanced link or Menu Link Attributes module.
Screenshots
Dialog Options Configuration
Dialog Example Links and Source
Steps to review
Updating and configuring modal dialog support
- Run pending database updates
- Go to Webform » Configuration » Forms (/admin/structure/webform/config)
- Review 'Dialog settings'
- Check 'Enable site-wide dialog support'
- Click 'Save configuration'
- Add class attribute to a tag to allowed tags in Basic HTML (/admin/config/content/formats/manage/basic_html?) and Restricted HTML (/admin/config/content/formats/manage/restricted_html)
Adding modal dialog links to a node's body
- Confirm 'Webform » Contact » Settings » General' has 'Dialog settings' (/admin/structure/webform/manage/contact/settings)
- Copy modal dialog link source
- Create a page (/node/add/page)
- Paste modal dialog link into the 'Body' source
- Click 'Save'
- Confirm that the link opens the 'Contact' webform in a modal dialog
Impacts:
Site builders, administrators, editors
Module developers
Themers
Comments
Dialog close button is missing icon
Hey, I have followed your instruction and it's working properly. However, the 'close' button does not have an icon. It's just an empty box which is obviously not good UX. I looked at the console and there's no JS error. What am I missing? Thanks!