Drupal中使用Bootstrap 3 Modal模态消息框

Drupal中这种丑陋的消息框是不是看腻了？

下面就让我们使用Bootstrap 3中的Modal模态框来替换Drupal默认的消息框，需要安装Bootstrap主题（非Bootstrap主题需引用Bootstrap的css和modal.js)

1.在主题下的template.php中覆写theme_status_messages()

<?php
function _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="ModalMessage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog ">
      <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title" >消息</h2>
      </div>
        <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-success" data-dismiss="modal">关闭</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->';
  }
  return $output;
}
?>

 2.在主题目录下的js文件夹中新建一个名为modal_messages.js(可自定义)的文件，js内容如下：

(function ($) {
    //add drupal 7 code
    Drupal.behaviors.MyfunctionTheme = {
        attach: function(context, settings) {
    //end drupal 7 calls

            //Tell JQuery that there's an Ajax event first

            $('#ModalMessage').modal();
        }}})
 (jQuery);

并在主题目录下的.info 文件中添加 scripts[] = 'js/modal_messages.js'

如果对Drupal中的js文件格式不是特别了解，请浏览Drupal 7主题定制JQuery和JavaScript技巧

再去清除主题缓存，看看你的消息框是不是变成漂亮Bootstrap的Modal？