Bootstrap模态框如何垂直居中?

avatar 2016年08月09日20:41:50 1 3033 views
博主分享免费Java教学视频,B站账号:Java刘哥 ,长期提供技术问题解决、项目定制:本站商品点此
html代码
  1. <!--登陆弹窗-->
  2.     <form action="__URL__/doLogin" method="post" class="form-horizontal">
  3.         <!--模态框声名-->
  4.         <div class="modal" id="myModal" tabindex="-1">
  5.             <!--窗口声名-->
  6.             <div class="modal-dialog modal-sm">
  7.                 <!--内容声名-->
  8.                 <div class="modal-content">
  9.                     <div class="modal-header">
  10.                         <button class="close" data-dismiss="modal">
  11.                             <span>&times;</span>
  12.                         </button>
  13.                         <h4 class="modal-title">用户登录</h4>
  14.                     </div>
  15.                     <div class="modal-body">
  16.                         <div class="form-group has-success has-feedback">
  17.                             <label for="username" class="col-sm-3 control-label">账号</label>
  18.                             <div class="col-sm-9">
  19.                                 <span class="glyphicon glyphicon-user form-control-feedback"
  20.                                     aria-hidden="true"></span> <span id="inputSuccess3Status"
  21.                                     class="sr-only">(success)</span> <input type="text"
  22.                                     id="username" name="username" class="form-control"
  23.                                     placeholder="请输入您的用户名" title="可包含中文数字和常用字符"
  24.                                     onkeydown="if(event.keyCode==32||event.keyCode==13){return false;}">
  25.                                 <!-- 禁用空格和回车 -->
  26.                             </div>
  27.                         </div>
  28.                         <div class="form-group has-success has-feedback">
  29.                             <label for="password" class="col-sm-3 control-label">密码</label>
  30.                             <div class="col-sm-9">
  31.                                 <span class="glyphicon glyphicon-lock form-control-feedback"
  32.                                     aria-hidden="true"></span> <span id="inputSuccess3Status"
  33.                                     class="sr-only">(success)</span> <input type="password"
  34.                                     id="password" name="password" class="form-control"
  35.                                     maxlength="12" placeholder="请输入您的密码" oncopy="return false"
  36.                                     oncut="return false" onpaste="return false" title=""
  37.                                     onkeydown="if(event.keyCode==32||event.keyCode==13){return false;}">
  38.                             </div>
  39.                         </div>
  40.                     </div>
  41.                     <div class="modal-footer">
  42.                         <div class="form-group">
  43.                             <div class="col-sm-offset-2 col-sm-10">
  44.                                 <button type="submit" class="btn btn-success" id="login">现在登录
  45.                                     »</button>
  46.                             </div>
  47.                         </div>
  48.                     </div>
  49.                 </div>
  50.             </div>
  51.         </div>
  52.     </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

转载请注明



  • 微信
  • 交流学习,资料分享
  • weinxin
  • 个人淘宝
  • 店铺名:言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

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

  

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