关闭

bootstrap模态框居中

标签: bootstrap模态框居中
1015人阅读 评论(0) 收藏 举报

API网址:http://www.runoob.com/bootstrap/bootstrap-button-plugin.html
           http://v3.bootcss.com/css/

实现模态框居中:

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);
					});
		}
		$('.modal').on('show.bs.modal', centerModals);
		$(window).on('resize', centerModals);

0
0
查看评论

bootstrap 模态框(modal)实现水平垂直居中显示 含具体分析

欢迎来到Altaba的博客  2017年1月22日        众所周知,bootstrap是一款非常实用的CSS框架(主要用于样式的快速搭建),由于其简洁,美观,快捷,响应式等特点备受大家喜欢,但是其本身也是存在很多bug,当...
  • Altaba
  • Altaba
  • 2017-01-22 17:10
  • 12834

bootstrap modal 垂直居中对齐

bootstrap modal 垂直居中对齐   文章参考 http://www.bubuko.com/infodetail-666582.html http://v3.bootcss.com/javascript/#modals   ...
  • yucaifu1989
  • yucaifu1989
  • 2016-05-16 15:55
  • 11783

Bootstrap模态框水平垂直居中与增加拖拽功能

最近开发一个CMS系统使用上了Bootstrap,在开发一个添加某些选项时,打算弹出一个模态框,但是发现,模态框不会垂直居中到屏幕上,而是在屏幕上方,找了好多资料都没搞定,最终自己试出了一种JS的方法,同时还需要Bootstrap模态框可以拖动,但是发现默认的也不行,翻遍了网络找了出来。现在分享给大...
  • yingzheng1983
  • yingzheng1983
  • 2015-09-22 22:30
  • 23041

Bootstrap Modal 上下左右居中 完美解决方案

解决bootstrap modal 居中问题
  • TLD_DLT
  • TLD_DLT
  • 2015-12-11 17:23
  • 16120

Bootstrap弹出框水平居中,垂直居中

  • 2016-09-21 00:44
  • 1KB
  • 下载

bootstrap模态框居中

API网址:http://www.runoob.com/bootstrap/bootstrap-button-plugin.html            http://v3.bootcss.com/css/ 实现模态框居中: f...
  • kang5789
  • kang5789
  • 2015-11-18 20:15
  • 1015

Bootstrap modal 模态框垂直居中

最近在使用Bootstrap框架,框架本身自带有一个modal模态框,也就是我们平时常叫的弹窗。但是这个模态框有一个特点,就是它本身是不会垂直居中的,默认只是距离顶部30px。那有没有办法让模态框垂直居中呢?有!       一个思路就是...
  • Lancelot_Lewis
  • Lancelot_Lewis
  • 2015-12-18 13:22
  • 4687

bootstrap模态框(modal)垂直居中

相信modal垂直居中的问题,大家都百度、谷歌过,或者自己研究过。modal框默认是在屏幕上方左右居中显示,但是有的人偏偏去搞成上下左右都居中,大屏幕好像没问题,但是移动端就会导致modal框变形。所以,我推荐我的这个方法,感觉还不错,至少居中的时候不会变形。如有什么问题,欢迎提出批评。 第一步:打...
  • u010884130
  • u010884130
  • 2016-03-08 09:56
  • 2466

Bootstrap模态框水平垂直居中

找了好久, 一直没找到使用纯css的方法, 下面是结合css和js的方法, 欢迎提出更好的方法.css如下: /* 覆写自带的样式 */ .modal-dialog { position: absolute; top: 50%; left: 50%; z-index:...
  • butterfly5211314
  • butterfly5211314
  • 2017-04-22 11:46
  • 248

BootStrap3.X模态框垂直居中显示

当点击按钮时modal的位置看起来很不舒服, 解决办法总结有两:   1.使用modal 弹出事件方法;    从官方文档中可以了解到, modal组件有不少事件接口:  其中 “shown.bs.modal”可以在弹窗框出现后 做一些处...
  • yongge123
  • yongge123
  • 2017-04-07 18:44
  • 1348
    个人资料
    • 访问:22090次
    • 积分:514
    • 等级:
    • 排名:千里之外
    • 原创:31篇
    • 转载:1篇
    • 译文:0篇
    • 评论:10条
    最新评论