Bootstrap3模态垂直居中



1     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
2         <div class="modal-dialog modal-lg">
3             <div class="modal-content"></div><!-- /.modal-content -->
4         </div><!-- /.modal -->
5     </div>


1         function openDialog() {
2             var modal = $(‘#myModal‘).modal({ keyboard: false, backdrop: ‘static‘/*,remote: ‘Detail?r=‘ + Math.random()*/ })
3             modal.find(‘.modal-content‘).load(‘Detail‘, { R: Math.random() });
4         }
 1         $(function () {
 2             function centerModals() {
 3                 $(‘#myModal‘).each(function (i) {
 4                     var $clone = $(this).clone().css(‘display‘, ‘block‘).appendTo(‘body‘);
 5                     var top = Math.round(($clone.height() - $clone.find(‘.modal-content‘).height()) / 2);
 6                     top = top > 0 ? top : 0;
 7                     $clone.remove();
 8                     $(this).find(‘.modal-content‘).css("margin-top", top);
 9                 });
10             }
11             if ($(‘#myModal‘).size() > 0) {
12                 //$(‘#myModal‘).on(‘shown.bs.modal‘, centerModals);
13                 //$(window).on(‘resize‘, centerModals);
14                 setInterval(centerModals, 200);
15             }
16         });
时间: 2024-09-18 12:21:47

Bootstrap3模态垂直居中的相关文章

Bootstrap模态框(modal)垂直居中

http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$(this).height())/2,发现还是不可行. 最终只能研究一下源码了,发现可以在bootstrap.js文件后面添加如下代码,便可以实现垂直居中. /* =====================================================================

bootstrap弹出的模态框水平垂直居中的实现

学习javascript从入门到放弃!,这是第一篇随笔,经验不足,如有不当之处,还望指出.好了废话不多说直接切入正题吧 1.bootstrap默认的model写法: //触发模态框的button <button data-toggle="modal" data-target="#myModal"type="button" class="btn btn-default" >button </button>

Boostrap 模态框 水平垂直居中问题

var editorB = new UE.ui.Editor({ initialFrameHeight: 350, initialFrameWidth: 600 }); editorA.render("ScienceContentA"); editorB.render("ScienceContentB"); $(function () { //$("#AddUpdateModalA").modal("hide").css({

BootStrap 模态框禁用空白处点击关闭,手动显示隐藏,垂直居中

$('#ajax_wait').modal({ backdrop: 'static', keyboard: false }); backdrop:static ,空白处不关闭. keyboard:false ,esc键盘不关闭. 上述代码同时打开模态框 当然,直接在模态框上加上data-backdrop="static"也可以. -------------------------------------------------------------------------------

Bootstrap(v3.2.0)模态框(modal)垂直居中

Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().eq(0).css("position", "absolute").css({ "margin":"0px", "top": function () { return (that.$element.height(

bootstrap3.0 模态框显示的文字超出怎么办

版本:bootstrap3.3 模态框文字超出 解决方案: 在html中控制自动换行 其实只要在表格控制中添加一句<div style="word-break:break-all">就搞定了.</div>其中可能对英文换行可能会分开一个单词问题:解决如下:语法: word-break : normal | break-all | keep-all 参数: normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行 break-all : 该行为与亚洲语

bootstrap模态框垂直居中

很久没有写东西了,之前想写一些移动端的东西以后补上吧,移动端发展还是蛮快的,回正题. 因为最近在弄一个系统,系统中引用了bootstrap,发现模态框垂直不居中,遂搜索了一下,也都试了一下,无非都是在js上做的修改,而且都还不完善,比如动态的区检测文档高度与模态框自身的高度,然后赋给模态框margin-top值. 这样做倒也不可厚非,可是需要做的判断会多一点,比如——1.模态框太高,超过屏幕:2.浏览器窗口缩放,模态框的位置变动问题. 下面开始动手 ↓ -------start--------

Bootstrap3.0学习教程十七:JavaScript插件模态框

这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单个*.js文件),或一次性全部引入(使用bootstrap.js或压缩版的bootstrap.min.js). 不要将两份文件全部引入 bootstrap.js和bootstrap.min.js同样是包含了所有插件.区别是:一个没有压缩,一个进行了压缩. 插件之间的依赖 某些插件和CSS组件依赖于其

bootstrap 3.3 模态框垂直居中问题

/* center modal */ 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);