JAVA高级面试进阶训练营视频教程

admin

最近项目中，涉及到很多细分领域的东西，有好些目前还没有详细的方案。这是后话，当前起步阶段，我要把握技术路线，搭建基础架构！其中，有好几个地方都用到模态框(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="width: 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>&nbsp;&nbsp;取消 </button>
26             <button id="siteSwitch" type="button" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i>&nbsp;&nbsp;切换 </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内容就可以正常显示了。

 

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