Drupal 8 module: Bootstrap 4 Modal

Are you using Drupal 8 Bootstrap 4 Theme (Barrio) and you want to use Drupal Ajax Dialog? Chances are you might have to do some extra coding just to make that Drupal core modal dialog make it look and feel like a bootstrap modal.

Bootstrap 4 Modal module adds new type of dialog that you can use.

Example of Drupal core ajax modal dialog:

<a class="use-ajax" 
    data-dialog-options="{&quot;width&quot;:400}" 
    data-dialog-type="modal" 
    href="/node/1">
    First node displayed in core modal dialog.
</a>

This link will load drupal node id 1 by ajax on drupal core modal dialog with 400px width

 

Example of Bootstrap 4 Modal dialog:

<a class="use-ajax" 
    data-dialog-options="{&quot;dialogClasses&quot;:&quot;modal-dialog-centered&quot;,&quot;dialogShowHeader&quot;:false}" 
    data-dialog-type="bootstrap4_modal" 
    href="/node/1">
    First node displayed in bootstrap 4 modal dialog.
</a>

This link will load drupal node id 1 by ajax on drupal core modal dialog with modal dialog vertically centered and no modal header.