in this tuto, I'll show you how to create a modal in Drupal 8 with one line of HTML.
Before you try to display dialogs on your site, make sure the drupal.dialog.ajax library is loaded. Add the library as a dependency to your theme or module.
add library in twig:
{{ attach_library('core/drupal.dialog.ajax') }}
add library in PHP:
$variables['#attached']['library'][] = 'core/drupal.dialog.ajax';
and then add the following snippet:
<a class="use-ajax"
data-dialog-options="{"width":400}"
data-dialog-type="modal"
href="/node/1">
Open Dialog
</a>
Links can be used to display a dialog box by simply adding the use-ajax class to the HTML element and specifying some dialog options.
This link opens /node/1 in a modal dialog box.
data-dialog-type: This is either 'modal' or 'dialog'.
data-dialog-options: A JSON encoded string of options for Drupal.dialog.
if Dialogs not displaying with a Javascript error, you might have to use " instead of ". A valid parameter would be:
data-dialog-options="{"width":400}"
Drupal core offers different types of dialogs:
- Modal dialogs (
data-dialog-type="modal"): They overlap the entire page, no other elements can be clicked while modal dialogs are visible. Only one modal popup can be opened at the same time. - Non modal dialogs (
data-dialog-type="dialog"): They pop up and stay on top of the page, but still other elements on the page can be clicked. Multiple dialogs can be displayed at the same time.
