bootstrapDialog插件集成datatables插件遇到的异常

最近项目中，涉及到很多细分领域的东西，有好些目前还没有详细的方案。这是后话，当前起步阶段，我要把握技术路线，搭建基础架构！其中，有好几个地方都用到模态框(Modal)， 虽然Bootstrap框架里面有这么一个插件Modal。但是他不是很好用，就比如，因为他可以说是比较原始的JS组件。至少开发一个模态框实现类似Windows的模态框框，居中在显示屏的中间，主要是水平方向居中，不是很方便。

Bootstrap组件的Modal的水平居中，网上有些方案，我也尝试过，不是很稳定，就比如下面：

 <!-- 模态框（Modal） -->
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
       <div class="modal-content" style="width: 150%;">
          <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
             <h4 class="modal-title" id="myModalLabel">站点切换 </h4>
          </div>
          <div class="modal-body">
             <table id="site-table" class="table table-striped table-hover">
                 <thead>
                     <tr>
                         <th>站点ID</th>
                         <th>站点域名</th>
                         <th>描述信息</th>
                         <th>单选按钮</th>
                     </tr>
                 </thead>
                 <tbody>
                 </tbody>
                 <!--<tr class="divider"/>-->
             </table>
          </div>
          <div class="modal-footer">
             <button type="button" class="btn btn-cancel" data-dismiss="modal"><i class="glyphicon glyphicon-arrow-left"></i>&nbsp;&nbsp;取消 </button>
             <button id="siteSwitch" type="button" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i>&nbsp;&nbsp;切换 </button>
          </div>
       </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->

对应的JS代码：

 <script type="text/javascript">
     /* center modal */
     function centerModals(){
             $('.modal').each(function(i){
             var $clone = $(this).clone().css('display', 'block').appendTo('body');
             var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / );
             var left = Math.round(($clone.width() - $clone.find('.modal-content').width()) / );
             top = top >  ? top : ;
             left = left >  ? left : ;
             $clone.remove();
                 $(this).find('.modal-content').css("margin-top", top).css("margin-left", left);
             });
     }

     $(document).ready(function(){
         $('.modal').on('show.bs.modal', centerModals);
         $(window).on('resize', centerModals);            

         $('#siteSwitchModal').click(function(){
             $('#myModal').modal({keyboard: false, show: true});
         });
     });
 </script>

操作逻辑是点击id为siteSwitchModal的按钮，显示出模态框，依据上面的逻辑代码，会出现有时居中，有时有点偏，总之不能稳定的居中，但是，垂直方向上可以居中，由于时间紧，没有时间深入研究，若有高人指点，欢迎！

后来，选择了BootstrapDialog插件，其使用非常的方便，简单，这个插件应该是针对Bootstrap的Modal组件进行的二次开发得到的。为了实现我期望的水平方向居中，只需要下面的配置即可：

 <script src="${basePath}/js/bootstrap-dialog.min.js"></script>
 <link href="${basePath}/css/bootstrap-dialog.min.css" rel="stylesheet">
 <script type="text/javascript">
     $(document).ready(function(){
         $('#siteSwitchModal').click(function(){
             BootstrapDialog.show({
                 size: BootstrapDialog.SIZE_WIDE,
                 title: '站点切换',
                 closable: true,
                 draggable: true,
                 closeByBackdrop: false,
                 closeByKeyboard: false,
                 message: $('<div></div>').load('${basePath}/system/site/siteSwitch'),
                 buttons: [{
                     label: '取消',
                     action: function(dialogRef){
                         dialogRef.close();
                     }
                 },{
                     label: '切换',
                     cssClass: 'btn-success',
                     action: function(dialogRef){
                         dialogRef.close(); //此处的逻辑还未来得及实现
                     }
                 }]
             });
         });
     });
 </script>

这个看上去很简单，也的确很简单。但是，我遇到了一点小麻烦，那就是我的Dialog中的正文区，希望显示一个table（基于Datatable插件），核心代码，就是

 message: $('<div></div>').load('${basePath}/system/site/siteSwitch'),

利用jQuery的函数load （其实就是一个ajax的请求）从后台拉取html的文件。问题就在这个html的内容上了。如下是我遇到问题的view层模板文件：

 <!DOCTYPE html>
 <html>
 <head>
 4 <script src="${basePath}/js/jquery-1.11.1.min.js"></script>
 5 <script src="${basePath}/js/bootstrap.min.js"></script>
 6 <script src="${basePath}/js/jquery.dataTables.min.js"></script>
 7 <link href="${basePath}/css/bootstrap.min.css" rel="stylesheet">
 8 <link href="${basePath}/css/jquery.dataTables.min.css" rel="stylesheet">
 9 <link href="${basePath}/css/common.css" rel="stylesheet">
 </head>

 <body>
     <div class="container">
         <div class="row">
             <table id="site-table" class="table site-switch-table">
                 <thead>
                     <tr>
                         <th>站点ID</th>
                         <th>站点域名</th>
                         <th>描述信息</th>
                         <th>单选按钮</th>
                     </tr>
                 </thead>
                 <tbody>
                 </tbody>
             </table>
         </div>
     </div>
 </body>
 <script type="text/javascript">
     $(document).ready(function(){
         var table = $('#site-table').dataTable({ "bFilter":true, "bSort":true,
             //"bServerSide" : true,
             //"sAjaxSource":"./userInfo",
             "language": {
                 "url": "${basePath}/fonts/Chinese.json"
             }});
     });
 </script>
 </html>

问题现象是Modal对话框能够显示出来，但是，在它之下的页面的内容出现了移动，也就是说模态对话框对下面的页面的显示样式产生干扰，而且这个干扰貌似不仅位置移动，还有鼠标点击事件也被干扰了，有些按钮点的动，有的点不动。

看看下面两个图，图1是没有点击“切换”按钮的时候主页面上的按钮“创建专题”的位置，图2是点击切换按钮后，弹出模态框时，“创建专题”按钮的位置被莫名移动到下面的位置了。图3是我期望的样子，模态框弹出后，“创建专题”按钮依然不受影响，还在图1中显示的位置。

图3中显示的效果，其实，是将Dialog拖拽过了的，这个也是BootstrapDialog插件的优势。

回头来说，显示正常后，分析得知，是因为modal对话框中加载的内容，就是那个load函数对应的返回值，一个html页面中包含了下面的内容：

 <script src="${basePath}/js/jquery-1.11.1.min.js"></script>
 <script src="${basePath}/js/bootstrap.min.js"></script>
 <script src="${basePath}/js/jquery.dataTables.min.js"></script>
 <link href="${basePath}/css/bootstrap.min.css" rel="stylesheet">
 <link href="${basePath}/css/jquery.dataTables.min.css" rel="stylesheet">
 <link href="${basePath}/css/common.css" rel="stylesheet">

但是，这些内容，在模态框的下面的页面中，其实也包含了。应该是这两个部分有什么联系，主要可能是因为BootstrapDialog对这个的隔离不太令人满意吧，于是，将要在Dialog中加载的内容，也就是message对应的内容中去掉上面的这些js和css文件，留下存的一点html内容就可以正常显示了。

这其中的具体原因，不是很清楚了。。。