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 相关文章推荐
js局部刷新页面时间具体实现
Jul 04 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 Javascript
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动态创建Flash动画
2006/10/09 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
js实现打字小游戏
2019/12/17 Javascript
django中的setting最佳配置小结
2017/11/21 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Python基于requests库爬取网站信息
2020/03/02 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
教师党员承诺书
2014/03/25 职场文书
2015年采购部工作总结
2015/04/23 职场文书
冰雪公主观后感
2015/06/16 职场文书
微信早安问候语
2015/11/10 职场文书