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 off-canvas dialog in drupal 8.

Off canvas dialogs: Are no popup windows that overlap other content, but are sliding into the page by moving other content to the side.

This type of dialog is especially useful to display larger portions of content, like long detail pages that could require the user to scroll down. Also the off canvas dialog is well usable on mobile devices. 

Before you try to display Off canvas 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="dialog"
   data-dialog-renderer="off_canvas"
   href="/node/35">
  Open Dialog
</a>

    Links can be used to display a Off canvas dialogs by simply adding the use-ajax class to the HTML element and specifying some dialog options.

    This link opens /node/35 in a Off canvas dialogs.

    data-dialog-type: This is either 'modal' or 'dialog'.

    data-dialog-options: A JSON encoded string of options for Drupal.dialog.

    if Off canvas 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}"

    And that's it! Off-canvas dialog is done and ready for action.

    OFF-CANVAS DIALOG IN DRUPAL 8

     

     

     

    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