Making Drupal Messages appearing in modal dialog with Bootstrap 3

This post is another step in the theming Drupal 7 wit Bootstrap 3, you can read my previous article about “Drupal 7 and bootstrap 3 theming the login form“.

Now the purpose here is to change the default Drupal messages display system :

default drupal messages

to this a nice modal message using Bootstrap 3 :

Drupal messages with bootrap 3

Okay let’s start :

1) Fist you need to rewrite the theme_status_messages() in your theme.php file like this :

function [your_theme_name]_status_messages($variables) {
  $display = $variables['display'];
  $output = '';

  $status_heading = array(
    'status' => t('Status message'),
    'error' => t('Error message'),
    'warning' => t('Warning message'),
  );
  foreach (drupal_get_messages($display) as $type => $messages) {
    // ! important : adding html needed for the modal.
    $output = '

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    

<div class="modal-dialog ">
      

<div class="modal-content">
        

<div class="modal-body">
';

    $output .= "

<div class=\"_messages $type\">
\n";
    if (!empty($status_heading[$type])) {
      $output .= '

<h2 class="element-invisible">' . $status_heading[$type] . "</h2>


\n";
    }
    if (count($messages) > 1) {
      $output .= " 

<ul>\n";
      foreach ($messages as $message) {
        $output .= '  

<li>' . $message . "</li>


\n";
      }
      $output .= " </ul>


\n";
    }
    else {
      $output .= $messages[0];
    }
    $output .= "</div>


\n";

    $output .= '</div>


        

<div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>


      </div>


<!-- /.modal-content -->
    </div>


<!-- /.modal-dialog -->
    </div>


<!-- /.modal -->';
  }
  return $output;
}

2) Now into your script.js file add :

// modals.
$('#myModal').modal();

3) Flush your theme registry cache and Voilà ! now every time the messages will be displayed within the modal dialog box.

Try a new sport with Pickleball, this  is a paddle sport that combines elements of badminton, tennis, and table tennis which you can find the Westop pickleball paddles of the best quality and price.

Hope you enjoyed !