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. Request 和 Response 原理

    * Request 和 Response 原理:     * request对象和response对象由服务器创建,我们只需要在service方法中使用这两个对象即可        * 继承体系结构: ...

  2. #研发解决方案介绍#基于StatsD+Graphite的智能监控解决方案

    郑昀 基于李丹和刘奎的文档 创建于2014/12/5 关键词:监控.dashboard.PHP.graphite.statsd.whisper.carbon.grafana.influxdb.Pyth ...

  3. iPhone被盗后怎么?这篇文章只办针对iOS7后的系统

    中午准备去吃饭的时候,今天看到Tungbaby的手机被盗后怎么做?http://www.jianshu.com/p/f13f49cd9b90 碰巧我的手机也被盗了.就来分享下我的经验吧.由于我当时是在 ...

  4. Mac入门教程之: Command键5个隐藏功能

    Mac 电脑的 Command 键位于空格边上,是 OS X 系统很多快捷键组合的一部分.不过,Command 自己也能完成很多操作,帮助用户更好的在 OS X 中完成各项任务,下面是 Command ...

  5. Perl 脚本报Can't locate Mail/Sender.pm 解决办法

        在新的Linux Server(Red Hat Enterprise Linux Server release 5.7 (Tikanga))上配置磁盘空间告警的perl脚本后,测试时报如下错误 ...

  6. Reporting Service 服务启动时报错The service did not respond to the start or control request in a timely fashion

    案例环境: 启动一台数据库服务器(Windows Server 2003)的Reporting Service(SQL Server 2008 R2)服务时,出现如下错误信息: System.Inva ...

  7. SSRS 2008 R2 错误:Timeout expired. The timeout period

    今天遇到了Reporting Services(SQL SERVER 2008 R2)的报表执行异常情况,报表加载数据很长时间都没有响应,最后报"An error occurred with ...

  8. MS Sql Server 数据库或表修复(Log日志文件损坏的修复方法)

    ----------------- [1] use master go sp_configure reconfigure with override go ----------------- [2] ...

  9. log4j配置详解

    Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...

  10. NIO与AIO,同步/异步,阻塞/非阻塞

    1.flip(),compact(),与clear()的使用 flip()内部实现,先将limit设为当前位置,再将缓冲区的postion设为0,所以是为将缓冲区的数据写出到其它通道或者get()作准 ...