Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh
Category:

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="{&quot;width&quot;: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 &quot; instead of ". A valid parameter would be:

    data-dialog-options="{&quot;width&quot;: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.

     

     

    Comments

    Add new comment

    Restricted HTML

    Search

    Page Facebook

    Become a patron

    If you need some help or you search a Drupal freelancer don't hesitate to contact us.

     

    Contact Us

    All the content is FREE but I still need your help

     

    Become a patreon