Bootstrap模态框如何垂直居中？

avatar 2016年08月09日20:41:50 1 2563 views
博主分享免费Java教学视频，B站账号：Java刘哥
html代码
  1. <!--登陆弹窗-->
  2.     <form action="__URL__/doLogin" method="post" class="form-horizontal">
  4.         <!--模态框声名-->
  5.         <div class="modal" id="myModal" tabindex="-1">
  6.             <!--窗口声名-->
  7.             <div class="modal-dialog modal-sm">
  8.                 <!--内容声名-->
  9.                 <div class="modal-content">
  10.                     <div class="modal-header">
  11.                         <button class="close" data-dismiss="modal">
  12.                             <span>&times;</span>
  13.                         </button>
  14.                         <h4 class="modal-title">用户登录</h4>
  15.                     </div>
  17.                     <div class="modal-body">
  18.                         <div class="form-group has-success has-feedback">
  20.                             <label for="username" class="col-sm-3 control-label">账号</label>
  21.                             <div class="col-sm-9">
  22.                                 <span class="glyphicon glyphicon-user form-control-feedback"
  23.                                     aria-hidden="true"></span> <span id="inputSuccess3Status"
  24.                                     class="sr-only">(success)</span> <input type="text"
  25.                                     id="username" name="username" class="form-control"
  26.                                     placeholder="请输入您的用户名" title="可包含中文数字和常用字符"
  27.                                     onkeydown="if(event.keyCode==32||event.keyCode==13){return false;}">
  28.                                 <!-- 禁用空格和回车 -->
  30.                             </div>
  31.                         </div>
  34.                         <div class="form-group has-success has-feedback">
  35.                             <label for="password" class="col-sm-3 control-label">密码</label>
  36.                             <div class="col-sm-9">
  37.                                 <span class="glyphicon glyphicon-lock form-control-feedback"
  38.                                     aria-hidden="true"></span> <span id="inputSuccess3Status"
  39.                                     class="sr-only">(success)</span> <input type="password"
  40.                                     id="password" name="password" class="form-control"
  41.                                     maxlength="12" placeholder="请输入您的密码" oncopy="return false"
  42.                                     oncut="return false" onpaste="return false" title=""
  43.                                     onkeydown="if(event.keyCode==32||event.keyCode==13){return false;}">
  45.                             </div>
  46.                         </div>
  47.                     </div>
  48.                     <div class="modal-footer">
  49.                         <div class="form-group">
  50.                             <div class="col-sm-offset-2 col-sm-10">
  51.                                 <button type="submit" class="btn btn-success" id="login">现在登录
  52.                                     »</button>
  53.                             </div>
  54.                         </div>
  55.                     </div>
  56.                 </div>
  57.             </div>
  58.         </div>
  59.     </form>
jQuery代码
  1. //模态框垂直居中
  2.    function centerModals() {
  3.        $('.modal').each(
  4.                function(i) {
  5.                    var $clone = $(this).clone().css('display', 'block')
  6.                            .appendTo('body');
  7.                    var top = Math.round(($clone.height() - $clone.find(
  8.                            '.modal-content').height()) / 2);
  9.                    top = top > 0 ? top : 0;
  10.                    $clone.remove();
  11.                    $(this).find('.modal-content').css("margin-top",
  12.                            top - 50);
  13.                });
  14.    }
  15.    $('.modal').on('show.bs.modal', centerModals);
  16.    $(window).on('resize', centerModals);
  本文地址：http://liuyanzhao.com/3495.html 转载请注明  
历史上的今天
八月
09日
  • 微信
  • 交流学习，有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享，问题解决，技术交流。群号：590480292
  • weinxin
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0