bootstrap模态框垂直居中效果


Posted in Javascript onDecember 03, 2016

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

先上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>×</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 相关文章推荐
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
JS制作类似选项卡切换的年历
Dec 03 #Javascript
JS键盘版计算器的制作方法
Dec 03 #Javascript
js实现右键自定义菜单
Dec 03 #Javascript
js实现小窗口拖拽效果
Dec 03 #Javascript
学习vue.js计算属性
Dec 03 #Javascript
学习vue.js中class与style绑定
Dec 03 #Javascript
jQuery图片轮播实现并封装(一)
Dec 03 #Javascript
You might like
详细介绍PHP应用提速面面观
2006/10/09 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
php防止sql注入代码实例
2013/12/18 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
Javascript中Event属性搜集整理
2013/09/17 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
Python中实现常量(Const)功能
2015/01/28 Python
实例Python处理XML文件的方法
2015/08/31 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
python常量折叠基础知识点讲解
2021/02/28 Python
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
平民服装店创业计划书
2014/01/17 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
班级心理活动总结
2014/07/04 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
学校财务管理制度
2015/08/04 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书