bootstrap模态框垂直居中效果

 更新时间:2016年12月03日 13:54:57   作者:静深的成长笔记  
这篇文章主要为大家详细介绍了bootstrap模态框垂直居中效果的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

先上jquery代码

 //模态框垂直居中
 function centerModals() {
  $('.modal').each(
    function(i) {
     var $clone = $(this).clone().css('display', 'block')
       .appendTo('body');
     var top = Math.round(($clone.height() - $clone.find(
       '.modal-content').height()) / 2);
     top = top > 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代码

<!--登陆弹窗-->
 <form action="__URL__/doLogin" method="post" class="form-horizontal">

  <!--模态框声名-->
  <div class="modal" id="myModal" tabindex="-1">
   <!--窗口声名-->
   <div class="modal-dialog modal-sm">
    <!--内容声名-->
    <div class="modal-content">
     <div class="modal-header">
      <button class="close" data-dismiss="modal">
       <span>&times;</span>
      </button>
      <h4 class="modal-title">用户登录</h4>
     </div>

     <div class="modal-body">
      <div class="form-group has-success has-feedback">

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

       </div>
      </div>


      <div class="form-group has-success has-feedback">
       <label for="password" class="col-sm-3 control-label">密码</label>
       <div class="col-sm-9">
        <span class="glyphicon glyphicon-lock form-control-feedback"
         aria-hidden="true"></span> <span id="inputSuccess3Status"
         class="sr-only">(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;}">

       </div>
      </div>
     </div>
     <div class="modal-footer">
      <div class="form-group">
       <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-success" id="login">现在登录
         »</button>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </form>

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

相关文章

  • JavaScript设计模式之缓存代理模式原理与简单用法示例

    JavaScript设计模式之缓存代理模式原理与简单用法示例

    这篇文章主要介绍了JavaScript设计模式之缓存代理模式原理与简单用法,结合实例形式简要分析了javascript缓存代理模式的基本原理、使用方法及相关操作注意事项,需要的朋友可以参考下
    2018-08-08
  • js实现base64文件的处理以及下载方法

    js实现base64文件的处理以及下载方法

    Base64是一种将二进制数据编码为ASCII字符的编码方式,这篇文章主要给大家介绍了关于js实现base64文件的处理以及下载的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • js, jQuery实现全选、反选功能

    js, jQuery实现全选、反选功能

    本文主要介绍了js, jQuery实现全选、反选功能的方法,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 原生JS实现图片懒加载(lazyload)实例

    原生JS实现图片懒加载(lazyload)实例

    图片懒加载也是比较常见的一种性能优化的方法,本篇文章主要介绍了原生JS实现图片懒加载(lazyload)实例,这里整理了详细的代码,有需要的小伙伴可以参考下
    2017-06-06
  • IE FF OPERA都可用的弹出层实现代码

    IE FF OPERA都可用的弹出层实现代码

    多浏览器的弹出层效果核心代码。需要的朋友可以测试下这个是从正在使用的网站中扒下来的。
    2009-09-09
  • 简单谈谈js的数据类型

    简单谈谈js的数据类型

    下面小编就为大家带来一篇简单谈谈js的数据类型。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • js多维数组降维的5种方法

    js多维数组降维的5种方法

    本文主要介绍了js多维数组降维的5种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】

    原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】

    这篇文章主要介绍了原生javascript运动函数的封装,结合实例形式分析了JavaScript封装匀速、抛物线、多属性的运动等函数及相关使用方法,需要的朋友可以参考下
    2020-02-02
  • 微信小程序实现张图片合成为一张并下载

    微信小程序实现张图片合成为一张并下载

    这篇文章主要为大家详细介绍了微信小程序实现张图片合成为一张并下载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 基于Bootstrap表单验证功能

    基于Bootstrap表单验证功能

    这篇文章主要为大家详细介绍了基于Bootstrap表单验证功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11

最新评论