bootstrap模态框垂直居中效果

发布时间：2020-12-18 00:46:46 所属栏目：安全来源：网络整理

导读：本文实例效果其实就是一个点击弹窗效果，供大家参考，具体内容如下先上jquery代码 0 ? top : 0; $clone.remove(); $(this).find('.modal-content').css("margin-top",top - 50); }); } $('.modal').on('show.bs.modal',centerModals); $(window).on('resize

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

先上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;用户登录</h4>
 </div>

 <div class="modal-body"&gt;
  <div class="form-group has-success has-feedback"&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-feedback"
     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="请输入您的用户名" title="可包含中文数字和常用字符"
     onkeydown="if(event.keyCode==32||event.keyCode==13){return false;}"&gt;
    <!-- 禁用空格和回车 -->

   </div>
  </div>


  <div class="form-group has-success has-feedback"&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-feedback"
     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;现在登录
     &raquo;</button>
   </div>
  </div>
 </div>
</div>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!