bootstrap模态框垂直居中效果

本文实例效果其实就是一个点击弹窗效果，供大家参考，具体内容如下

先上jquery代码

0 ? top : 0; $clone.remove(); $(this).find('.modal-content').css("margin-top",top - 50); }); } $('.modal').on('show.bs.modal',centerModals); $(window).on('resize',centerModals);

HTML代码

<div class="modal-content"&gt;
 <div class="modal-header"&gt;
  <button class="close" data-dismiss="modal"&gt;
   <span>&times;</span>
  </button>
  <h4 class="modal-title"&gt;<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a><a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a></h4>
 </div>

 <div class="modal-body"&gt;
  <div class="form-group has-success has-<a href="https://www.jb51.cc/tag/Feed/" target="_blank" class="keywords">Feed</a>back"&gt;

   <label for="username" class="col-sm-3 control-label"&gt;账号</label>
   <div class="col-sm-9"&gt;
    <span class="glyphicon glyphicon-user form-control-<a href="https://www.jb51.cc/tag/Feed/" target="_blank" class="keywords">Feed</a>back"
     aria-hidden="true"&gt;</span> <span id="inputSuccess3Status"
     class="sr-only"&gt;(success)</span> <input type="text"
     id="username" name="username" class="form-control"
     placeholder="请输入您的<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>" title="可包含<a href="https://www.jb51.cc/tag/zhongwen/" target="_blank" class="keywords">中文</a>数字和常用字符"
     onkeydown="if(event.keyCode==32||event.keyCode==13){return false;}"&gt;
    <!-- 禁用空格和回车 -->

   </div>
  </div>


  <div class="form-group has-success has-<a href="https://www.jb51.cc/tag/Feed/" target="_blank" class="keywords">Feed</a>back"&gt;
   <label for="password" class="col-sm-3 control-label"&gt;密码</label>
   <div class="col-sm-9"&gt;
    <span class="glyphicon glyphicon-lock form-control-<a href="https://www.jb51.cc/tag/Feed/" target="_blank" class="keywords">Feed</a>back"
     aria-hidden="true"&gt;</span> <span id="inputSuccess3Status"
     class="sr-only"&gt;(success)</span> <input type="password"
     id="password" name="password" class="form-control"
     maxlength="12" placeholder="请输入您的密码" oncopy="return false"
     oncut="return false" onpaste="return false" title=""
     onkeydown="if(event.keyCode==32||event.keyCode==13){return false;}"&gt;

   </div>
  </div>
 </div>
 <div class="modal-footer"&gt;
  <div class="form-group"&gt;
   <div class="col-sm-offset-2 col-sm-10"&gt;
    <button type="submit" class="btn btn-success" id="login"&gt;现在<a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a>
     &raquo;</button>
   </div>
  </div>
 </div>
</div>

bootstrap模态框垂直居中效果

猜你在找的Bootstrap相关文章