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 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
老生常谈js中的MVC
Jul 25 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
JS实现盒子拖拽效果
Feb 06 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
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
编写简单的Python程序来判断文本的语种
2015/04/07 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
Python协程的用法和例子详解
2017/09/09 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
python学生信息管理系统(初级版)
2018/10/17 Python
python列表使用实现名字管理系统
2019/01/30 Python
python打包成so文件过程解析
2019/09/28 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
物流专业毕业生推荐信范文
2013/11/18 职场文书
决心书标准格式
2014/03/11 职场文书
超市理货员岗位职责
2014/07/04 职场文书
法律意见书范文
2015/06/04 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
Python编写nmap扫描工具
2021/07/21 Python
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技