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?
评论
欢迎转走,呵呵
添加新评论