I use bootstrap theme, and I want to open messages in bootstrap modal; after searching, I found the Bootstrap Modal Messages module, which is not available for Drupal 8.

Is there any way for Drupal messages to appear in a Bootstrap modal?


This can be done by twig template and jquery. Add only 'Status messages' block on 'Highlighted' region. and in the twig template add like below:

{% if page.highlighted %}
          {% block highlighted %}

            <div class="modal fade" id="modal-div">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    <h4 class="modal-title">Message</h4>
                  <div class="modal-body">
                    {{ page.highlighted }}
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

          {% endblock %}
        {% endif %}

After that in jquery file :

    if($.trim($("#modal-div .region-highlighted").text()) != ''){//region will be printed even if the highlighted area is blank

This will show your messages in modal window.

  • finally I did it with something like this
    – Yuseferi
    Sep 28 '16 at 6:20
  • @YusefMohamadi, can you post the final solution?
    – 4k4
    Oct 3 '19 at 8:45

Drupal at the end of the day outputs HTML just like any other non Drupal site.

If you look at the Modal Messages Documentation all you have to do is add modal html attributes (ex: data-toggle="modal" or class="modal fade") to your Drupal message divs.

If you look at the D7 module, all the "magic" (adding the attributes) is done through jQuery.

Alternatively, you can add the attributes by adding the following to your themename.theme file

function themename_preprocess_page(&$variables) {

  if (!empty($variables['page']['highlighted'])) {
    $variables['page']['highlighted']['#attributes']['class'][] = 'modal fade';
    $variables['page']['highlighted']['#attributes']['data-toggle'][] = 'modal';

The above will work as long as your Status messages block is placed in the Highlighted region in /admin/structure/block.

  • Updated my answer
    – No Sssweat
    Jul 5 '16 at 0:05
  • no worked, I test it right now , not worked ,
    – Yuseferi
    Sep 18 '16 at 9:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.