最近项目中,涉及到很多细分领域的东西,有好些目前还没有详细的方案。这是后话,当前起步阶段,我要把握技术路线,搭建基础架构!其中,有好几个地方都用到模态框(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内容就可以正常显示了。
这其中的具体原因,不是很清楚了。。。