Bootstrap Modal 垂直居中
Bootstrap 的 modal 正文中如果内容较少的话,并不会垂直居中,而是偏上, 如果想要达到垂直居中的效果,需要自动动手了。
可以在初始显示时设置垂直居中,可以这样做:
$('#YourModal').modal().css({
'margin-top': function () {
return -($(this).height() / 2);
}
});
或者我们可以将这个效果注册到显示事件中
show: This event fires immediately when the
showinstance method is called.
$('.modal').on('show', function() {
$(this).css({
'margin-top': function () {
return -($(this).height() / 2);
}
});
});
Bootstrap Modal 垂直居中的更多相关文章
- Bootstrap modal垂直居中
Bootstrap modal垂直居中 在网上看到有Bootstrap2的Modal dialog垂直居中问题解决方法,这种方法自己试了一下,并不能完全居中,并且窗口的大小不一样的话,每次显示的m ...
- bootstrap modal 垂直居中对齐
bootstrap modal 垂直居中对齐 文章参考 http://www.bubuko.com/infodetail-666582.html http://v3.bootcss.com/Jav ...
- bootstrap modal垂直居中(简单封装)
1.使用modal 弹出事件方法: 未封装前: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- bootstrap modal垂直居中 (转)
根据博友的经验,总结后请使用方法一就行了 一,修改bootstrap.js 源码 原来的: Modal.prototype.adjustDialog = function () { ].scrollH ...
- Bootstrap模态框(modal)垂直居中
http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$( ...
- Bootstrap(v3.2.0)模态框(modal)垂直居中
Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...
- bootstrap Modal 模态框垂直居中
解决 Modal 垂直居中的问题,上网找了好多博客,有好多说改源码的,这个并没有实践. 但发现另一种解决办法,可以实现,代码如下: function centerModals(){ $('.modal ...
- Bootstrap3模态框Modal垂直居中样式
1,Bootstrap 模态框插件Bootbox垂直居中样式: <!DOCTYPE html> <html lang="en"> <head> ...
- Bootstrap Modal 垂直方向加滚动条
原文链接:http://blog.csdn.net/cyh1111/article/details/52960747 背景 使用Bootstrap Modal实现用户资料修改,由于用户信息过多,默认M ...
随机推荐
- php 模拟浏览器get和post提交处理
文件夹test下index.php <?phpheader("Content-Type: text/html;charset=gb2312"); function cUrlG ...
- 《JavaScript高级程序设计》读书笔记 ---基本概念小结
ECMAScript 中的基本数据类型包括Undefined.Null.Boolean.Number 和String. 与其他语言不同,ECMScript 没有为整数和浮点数值分别定义不同的数据 ...
- VBS实现批量重命名文件并且操作前备份原有文件
'=========================================================================='' VBScript Source File - ...
- python 常用
1. dir() 不带参数时,返回当前范围内的变量.方法和定义的类型列表:带参数时,返回参数的属性.方法列表.如果参数包含方法__dir__(),该方法将被调用.如果参数不包含 ...
- hdu_2842_Chinese Rings(矩阵快速幂)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=2842 题意:解开第k个环需要先解开前(k-2)个环,并留有第(k-1)环.问解开n环最少需要几步. 题 ...
- webapp前端开发软键盘与position:fixed为我们带来的不便
前提:我们考虑兼容的环境为android和ios两种智能手机 兼容环境测试结果显示android的表现明显好于ios,ios手机在软键盘呼起收起时存在着很严重的兼容性问题 场景展示: 页面正常状态 软 ...
- oc汉子转拼音
oc中可以不使用第三方库直接吧数组转成拼音: 代码如下: NSString *str = @"中国abc人民共和国"; CFStringRef aCFString=(__bridg ...
- MVC4相关Razor语法以及Form表单(转载)
Razor的布局(Layout) 默认建的工程都自带的了一个_ViewStart.cshtml文件,文件里面的代码如下: @{ Layout = "~/Views/Shared/_Layou ...
- Ansible10:Playbook的角色与包含【转】
当单个playbook文件越来越大的时候,我们就需要重新来组织Playbooks了.我们可以将一个大的playbook拆成若干个小的playbook文件,然后通过include的方式,在主配置文件中将 ...
- 使用onclick跳转到其他页面。使用button跳转到指定url
1. onclick="javascript:window.location.href='aa.htm'" 2. onclick="location='URL'&quo ...