最近项目中，涉及到很多细分领域的东西，有好些目前还没有详细的方案。这是后话，当前起步阶段，我要把握技术路线，搭建基础架构！其中，有好几个地方都用到模态框(Modal)， 虽然Bootstrap框架里面有这么一个插件Modal。但是他不是很好用，就比如，因为他可以说是比较原始的JS组件。至少开发一个模态框实现类似Windows的模态框框，居中在显示屏的中间，主要是水平方向居中，不是很方便。
Bootstrap组件的Modal的水平居中，网上有些方案，我也尝试过，不是很稳定，就比如下面：
1 <!-- 模态框（Modal） --> 2 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static"> 3 <div class="modal-dialog"> 4 <div class="modal-content" style=" 150%;"> 5 <div class="modal-header"> 6 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 7 <h4 class="modal-title" id="myModalLabel">站点切换 </h4> 8 </div> 9 <div class="modal-body"> 10 <table id="site-table" class="table table-striped table-hover"> 11 <thead> 12 <tr> 13 <th>站点ID</th> 14 <th>站点域名</th> 15 <th>描述信息</th> 16 <th>单选按钮</th> 17 </tr> 18 </thead> 19 <tbody> 20 </tbody> 21 <!--<tr class="divider"/>--> 22 </table> 23 </div> 24 <div class="modal-footer"> 25 <button type="button" class="btn btn-cancel" data-dismiss="modal"><i class="glyphicon glyphicon-arrow-left"></i> 取消 </button> 26 <button id="siteSwitch" type="button" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> 切换 </button> 27 </div> 28 </div><!-- /.modal-content --> 29 </div><!-- /.modal-dialog --> 30 </div><!-- /.modal -->
对应的JS代码：
1 <script type="text/javascript"> 2 /* center modal */ 3 function centerModals(){ 4 $('.modal').each(function(i){ 5 var $clone = $(this).clone().css('display', 'block').appendTo('body'); 6 var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2); 7 var left = Math.round(($clone.width() - $clone.find('.modal-content').width()) / 2); 8 top = top > 0 ? top : 0; 9 left = left > 0 ? left : 0; 10 $clone.remove(); 11 $(this).find('.modal-content').css("margin-top", top).css("margin-left", left); 12 }); 13 } 14 15 $(document).ready(function(){ 16 $('.modal').on('show.bs.modal', centerModals); 17 $(window).on('resize', centerModals); 18 19 $('#siteSwitchModal').click(function(){ 20 $('#myModal').modal({keyboard: false, show: true}); 21 }); 22 }); 23 </script>
操作逻辑是点击id为siteSwitchModal的按钮，显示出模态框，依据上面的逻辑代码，会出现有时居中，有时有点偏，总之不能稳定的居中，但是，垂直方向上可以居中，由于时间紧，没有时间深入研究，若有高人指点，欢迎！
后来，选择了BootstrapDialog插件，其使用非常的方便，简单，这个插件应该是针对Bootstrap的Modal组件进行的二次开发得到的。为了实现我期望的水平方向居中，只需要下面的配置即可：
1 <script src="${basePath}/js/bootstrap-dialog.min.js"></script> 2 <link href="${basePath}/css/bootstrap-dialog.min.css" rel="stylesheet"> 3 <script type="text/javascript"> 4 $(document).ready(function(){ 5 $('#siteSwitchModal').click(function(){ 6 BootstrapDialog.show({ 7 size: BootstrapDialog.SIZE_WIDE, 8 title: '站点切换', 9 closable: true, 10 draggable: true, 11 closeByBackdrop: false, 12 closeByKeyboard: false, 13 message: $('<div></div>').load('${basePath}/system/site/siteSwitch'), 14 buttons: [{ 15 label: '取消', 16 action: function(dialogRef){ 17 dialogRef.close(); 18 } 19 },{ 20 label: '切换', 21 cssClass: 'btn-success', 22 action: function(dialogRef){ 23 dialogRef.close(); //此处的逻辑还未来得及实现 24 } 25 }] 26 }); 27 }); 28 }); 29 </script>
这个看上去很简单，也的确很简单。但是，我遇到了一点小麻烦，那就是我的Dialog中的正文区，希望显示一个table（基于Datatable插件），核心代码，就是
1 message: $('<div></div>').load('${basePath}/system/site/siteSwitch'),
利用jQuery的函数load （其实就是一个ajax的请求）从后台拉取html的文件。问题就在这个html的内容上了。如下是我遇到问题的view层模板文件：
1 <!DOCTYPE html> 2 <html> 3 <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"> 10 </head> 11 12 <body> 13 <div class="container"> 14 <div class="row"> 15 <table id="site-table" class="table site-switch-table"> 16 <thead> 17 <tr> 18 <th>站点ID</th> 19 <th>站点域名</th> 20 <th>描述信息</th> 21 <th>单选按钮</th> 22 </tr> 23 </thead> 24 <tbody> 25 </tbody> 26 </table> 27 </div> 28 </div> 29 </body> 30 <script type="text/javascript"> 31 $(document).ready(function(){ 32 var table = $('#site-table').dataTable({ "bFilter":true, "bSort":true, 33 //"bServerSide" : true, 34 //"sAjaxSource":"./userInfo", 35 "language": { 36 "url": "${basePath}/fonts/Chinese.json" 37 }}); 38 }); 39 </script> 40 </html>
问题现象是Modal对话框能够显示出来，但是，在它之下的页面的内容出现了移动，也就是说模态对话框对下面的页面的显示样式产生干扰，而且这个干扰貌似不仅位置移动，还有鼠标点击事件也被干扰了，有些按钮点的动，有的点不动。
看看下面两个图，图1是没有点击“切换”按钮的时候主页面上的按钮“创建专题”的位置，图2是点击切换按钮后，弹出模态框时，“创建专题”按钮的位置被莫名移动到下面的位置了。图3是我期望的样子，模态框弹出后，“创建专题”按钮依然不受影响，还在图1中显示的位置。
图3中显示的效果，其实，是将Dialog拖拽过了的，这个也是BootstrapDialog插件的优势。
回头来说，显示正常后，分析得知，是因为modal对话框中加载的内容，就是那个load函数对应的返回值，一个html页面中包含了下面的内容：
1 <script src="${basePath}/js/jquery-1.11.1.min.js"></script> 2 <script src="${basePath}/js/bootstrap.min.js"></script> 3 <script src="${basePath}/js/jquery.dataTables.min.js"></script> 4 <link href="${basePath}/css/bootstrap.min.css" rel="stylesheet"> 5 <link href="${basePath}/css/jquery.dataTables.min.css" rel="stylesheet"> 6 <link href="${basePath}/css/common.css" rel="stylesheet">
但是，这些内容，在模态框的下面的页面中，其实也包含了。应该是这两个部分有什么联系，主要可能是因为BootstrapDialog对这个的隔离不太令人满意吧，于是，将要在Dialog中加载的内容，也就是message对应的内容中去掉上面的这些js和css文件，留下存的一点html内容就可以正常显示了。
这其中的具体原因，不是很清楚了。。。