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.

Hope you enjoyed !

22 thoughts on “Making Drupal Messages appearing in modal dialog with Bootstrap 3

    1. Hello Carlos thank you, i’m using a zen sub theme, that i’ve created to play with bootstrap. I think if you do the same you can easily add the bootstrap classes you need for layout.

  1. finally getting a chance to try to implement this and i can’t get it to work. no idea why :o( now instead of the default “ugly” message, i get no message at all. so the function override is working… but what happens after that is not. any ideas? cheers

    1. Hello, it’s maybe the javascript did you included the bootstrap.js ? try to see if you have any javascript error in the console. Because by default the popin is hidden

      1. console shows no errors. I put

        // modals.
        $(‘#myModal’).modal();

        in a scripts.js file not bootstrap.js. but i can’t imagine that would make any difference. would it?

        1. no i mean you need to include the bootstap.js library file then the you call the $(‘#myModal’).modal() :

          <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
              <script src="//code.jquery.com/jquery.js"></script>
              <!-- Include all compiled plugins (below), or include individual files as needed -->
              <script src="js/bootstrap.min.js"></script>
          <!-- here you call -->
           <script src="js/script.js"></script>
          

          example content for script.js :

          $(document).ready(function(){
          $(‘#myModal’).modal();
          });

          Try also to check in the source html if you find the code of popin

          1. It works now! I am a dolt and did not put $(‘#myModal’).modal(); within the $(document).ready(function(){

            It is great! but the dialog is a bit ugly and needs to be themed. it has a scroll bar for one small sentence. This is likely some css I can figure out myself. Thank you for your quick response and helping me to get this nifty effect working!

            Looking forward to your next addition to the series. Cheers Kevin

  2. Hi everyone! I installed boostrap theme following this tutorial https://drupal.org/node/1978010, i am usgin method 1 with LESS module and my subtheme is working perfectly, but i have a question where i can put my own styles ? thank you someone can help me using skype or something ? i have too many questions :)

      1. my less/style.less have this code for default

        /*
        // Bootstrap library.
        @import ‘bootstrap.less’;

        // Base-theme overrides.
        @import ‘overrides.less’;

        // Theme specific.
        @import ‘header.less’;
        @import ‘content.less’;
        @import ‘footer.less’;

        */

        my own style are going to be below this code ? or is going to be in any of that files, footer.less, conent.less .. etc ?

        now we never should use a .css file to add any style? just .less ?

        1. I would keep your custom styles in a separate file.

          e.g. @import ‘custom.less’;

          You can use both css or less files which ever you prefer. If your just using .css files then i would include them in your info file

          e.g. stylesheets[all][] = css/custom.css

  3. Thank you so much! guys!! now it’s more clear for me. Another question

    when i do a change in my custom.less its reflecting immediately on my site, that it´s good or bad ? am i over loading my website ? in my less module the option “LESS developer mode” and ” LESS watch mode” are disabled

  4. other thing , the file bootstrap_tkv/css/style.css say that

    “/**
    * This file should get overwritten if Method 1 is used. If Method 2 is chosen,
    * remove this comment and start adding your styles to this file.
    */

    “bootstrap_tkv” its my bootstrap sub-theme

    but its always empty, it never change its content. is it ok ? the less module is creating a temporal css file with this url

    “http://site.com/sites/default/files/less/ZOWUiLn_6ccaYM4_uUB8ZSKZyF1EBEs5EqdgKblUdIY/sites/all/themes/bootstrap_tkv/less/style.XcVzbo5GbrB4v7QVES377fts6uudS0o0YbaMpBamvPg.css?n19i85”

    thank you again!

    1. Thank you Mohamed, but when when I was writing this article the drupal bootstrap theme was in a very early stage so no modal emplemented.

Leave a Reply