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调用后台servlet方法实例
Jun 09 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
ReactRouter的实现方法
Jan 25 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 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分页函数示例代码分享
2014/02/24 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
python分割和拼接字符串
2013/11/01 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
销售总监工作职责
2013/11/21 职场文书
竞聘书模板
2014/03/31 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
公司介绍信范文
2015/01/31 职场文书
预备党员群众意见
2015/06/01 职场文书
监护人证明
2015/06/19 职场文书
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS