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.

     

     

    Riadh Rahmi

    Senior Web Developer (Drupal & Laravel)

    I am a senior web developer, I have experience in planning and developing large scale dynamic web applications especially in Drupal, Laravel.

    Web Posts

    Search

    Page Facebook