Bootstrap Modal 垂直居中 在 bootstrap.js中修改如下代码:

Modal.prototype.adjustDialog = function () {

var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight

 

this.$element.css({

paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',

paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''

})

// 是弹出框居中。。。

var $modal_dialog = $(this.$element[0]).find('.modal-dialog');

var m_top = ( $(window).height() - $modal_dialog.height() )/2;

$modal_dialog.css({'margin': m_top + 'px auto'});

}

 

Bootstrap Model点击空白处 popup会关闭:

增加属性
data-backdrop="static"

Bootstrap使用后笔记的更多相关文章

  1. 《深入理解bootstrap》读书笔记:第4章 CSS组件(下)

    十. 标签(.label类,label-xxx) 高亮一些标题部分. 1 2 3 4 5 6 <h1>HELLO<span class="label label-defau ...

  2. 《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

    bootstrap三大核心之二. 包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)....等等. 一. 图标字体 bootstrap3提供了200多个免费图 ...

  3. 《深入理解bootstrap》读书笔记:第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  4. Bootstrap+JSP实例学习笔记一.简单的带登录功能的首页

    前言 Bootstrap 是流行的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.源自于twiteer内部的开发框架. 当前(2019-05)最新版本是v3.3. ...

  5. 《深入理解bootstrap》读书笔记:第二章 整体架构

    一.  整体架构   1. CSS-12栅格系统 把网页宽度均分为12等分(保留15位精度)--这是bootstrap的核心功能. 2.基础布局组件 包括排版.按钮.表格.布局.表单等等. 3.jQu ...

  6. 《深入理解bootstrap》读书笔记:第一章 入门准备

    一.bootstrap框架简介 Bootstrap是最流行的前端开发框架. 什么是框架:开发过程的半成品. bootstrap具有以下重要特性: (1)完整的CSS样式插件 (2)丰富的预定义样式表 ...

  7. css去掉使用bootstrap框架后打印网页时预览效果下的超链接

    在我们写网页的时候,超链接是链接各个页面的桥梁,也是搜索引擎爬虫(spider)收录网站页面的关键,因此,在每个网页中会有许多的超链. 今天,一个同行妹妹在使用了bootstrap框架来搭建自己的网站 ...

  8. Bootstrap 基础学习笔记(一)

    排版 (1)标题 Bootstrap标题样式进行了以下显著的优化重置: 1.重新设置了margin-top和margin-bottom的值,  h1~h3重置后的值都是20px:h4~h6重置后的值都 ...

  9. 《深入理解Bootstrap》读书笔记(一)

    栅格系统 实现原理 通过定义容器大小,平分12份,再调整内外边距,最后结合媒体查询. 通过一系列包含内容的行和列来创建页面布局.下面列出了 Bootstrap 栅格系统是如何工作的: 1.行必须放置在 ...

随机推荐

  1. jQuery插件中文乱码解决办法

    修改jQuery插件源代码的时候,中文字符有时候会显示乱码,通常这个插件是老外写的,默认文件的编码格式ANSI格式,源代码写中文字符的时候就会显示乱码,解决方法就是将文件编码格式换成UTF-8格式 保 ...

  2. atitit.农历的公式与原理以及农历日期运算

    atitit.农历的公式与原理以及农历日期运算 1. 农历的概述1 2. 如何在电脑程序里面计算农历??1 3. 农历的公式2 4. 获取当日农历日历3 5. 历史日期公式加查表才能得到精确日期3 6 ...

  3. MDM证书申请的流程

    MDM证书申请的流程 整个流程分为两部分:vendor,customer. 一.Vendor 1.成为一个 MDM Vendor 1) 首先你需要拥有一个 Apple Enterprise accou ...

  4. Java异常之自定义异常

    哎呀,妈呀,又出异常了!俗话说:"代码虐我千百遍,我待代码如初恋". 小Alan最近一直在忙着工作,已经很久没有写写东西来加深自己的理解了,今天来跟大家聊聊Java异常.Java异 ...

  5. Play Framework 完整实现一个APP(四)

    上一篇最后出现的错误是因为断言 assertEquals(1, Post.count()); 出错,取到的Post的数量不是1,运行Test之前,表中有数据 可以添加以下方法,运行Test前清空数据 ...

  6. params可变参数

    class Program { // params可变参数 //将实参列表中跟可变参数数组类型一致的元素都当做数组的元素去处理. //params可变参数必须是形参列表中的最后一个元素. static ...

  7. Oracle数据泵(Data Dump)错误汇集

    Oracle数据泵(Data Dump)使用过程当中经常会遇到一些奇奇怪怪的错误案例,下面总结一些自己使用数据泵(Data Dump)过程当中遇到的问题以及解决方法.都是在使用过程中遇到的问题,以后陆 ...

  8. Symantec Backup Exec Remote Agent 2010在Redhat Enterprise 6.6上启动问题

    在Red Hat Enterprise Linux Server release 6.6 (Santiago)上安装了Symantec Backup Exec Remote Agent 2010后,启 ...

  9. W3School-CSS 表格实例

    CSS 表格实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (paddi ...

  10. 在Dell R720服务器上安装ESXI5.5时会出现卡在LSI_MR3.V00的解决方法

    接近年底,公司各种活动,各种加班,导致没有太多时间写博客,今抽了点时间将前几天搭建虚拟化服务时所出现的一个问题描述下: 服务器配置:CUP E5-2609     内存32G          硬盘5 ...