• Bootstrap框架中弹出窗(modal)遇到的一些问题
  • 伯牙的碎琴 发表于 2016/3/9 20:18:00 | 分类标签: Bootstrap教程 modal
  •  今天就在使用Bootstrap框架中遇到的一个问题分享一下,在产品开发的过程中使用了大量的弹出窗(modal)。

    刚开始学习使用的过程中就发现此窗口不能垂直居中,总是偏上,并且不能拖动,看了一下使用说明也没有提供过多的属性设置和方法,就这样使用默认的方式一直用着。最近,客户却提出了一个要求:能不能让弹出窗口居中,因为一些小的窗口偏上总感觉整体页面失衡,大一点的还过得去。

    因为之前对Bootstrap也不是很熟悉,便开始baidu、google,发现只有很少的解决方案,如下:

    1 $("#myModal").modal().css({
    2                 "margin-top": function () {
    3                     return - ($(this).height() / 2);
    4                 }
    5             }); 

    这种方法自己试了一下,并不能完全居中,并且窗口的大小不一样的话,每次显示的margin-top值也会改变,遮盖层还会出现滚动条,效果也不好看。

    自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$(this).height())/2,发现还是不可行。

    最终只能研究一下源码了,发现可以在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中。

    1 that.$element.children().eq(0).css("position", "absolute").css({
    2           "margin":"0px",
    3           "top": function () {
    4               return (that.$element.height() - that.$element.children().eq(0).height()-40) / 2 + "px";
    5           },
    6           "left": function () {
    7               return (that.$element.width() - that.$element.children().eq(0).width()) / 2 + "px";
    8           }
    9       });

    页面代码如下:


     1 <div>
     2     <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
     3         Launch demo modal
     4     </button>
     5     <!-- Modal -->
     6     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     7         <div class="modal-dialog">
     8             <div class="modal-content">
     9                 <div class="modal-header">
    10                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    11                     <h4 class="modal-title" id="myModalLabel">Modal title</h4>
    12                 </div>
    13                 <div class="modal-body">
    14                     ...
    15                 </div>
    16                 <div class="modal-footer">
    17                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    18                     <button type="button" class="btn btn-primary">Save changes</button>
    19                 </div>
    20             </div><!-- /.modal-content -->
    21         </div><!-- /.modal-dialog -->
    22     </div><!-- /.modal -->
    23 </div>

    效果图如下:

      

  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:伯牙的碎琴
  • 加入时间:2013/7/24 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮