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

var editorB = new UE.ui.Editor({ initialFrameHeight: 350, initialFrameWidth: 600 });

editorA.render("ScienceContentA");

editorB.render("ScienceContentB");

$(function () {

//$("#AddUpdateModalA").modal("hide").css({

//    //top: 0,

//    left:0,

//    "margin-top": function () {

//        //return -$(window).height()/2 + ($(window).height() - $(this).height()) / 2;

//        return - ($(this).height() / 2)-70;

//    },

//    "margin-left": function () {

//        return ($(window).width() - $(this).width())/2;

//    }

//});

$(‘.modal‘).on(‘show.bs.modal‘, centerModals);

$(window).on(‘resize‘, centerModals);

//PageQuery();//分页查询数据

});

//模态框水平垂直居中函数

function centerModals() {

$(‘.modal‘).each(function (i) {

var top = -($(this).height() / 2) - 70;

var left = ( $ (window).width() - $(this).width()) / 2;

$(this).css("margin-top", top);

$(this).css("margin-left", left);

});

}

时间: 2024-11-03 21:44:25

Boostrap 模态框 水平垂直居中问题的相关文章

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

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

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(

boostrap 模态框

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content

Bootstrap模态框(modal)垂直居中

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

JavaScript:bootstrap 模态框的简单应用

最近用上了bootstrap这个强大的前端框架,有空来总结一下.这里记录下模态框的简单应用. 首先,要在页面中引入相应的js.css文件 1 <link href="css/bootstrap.css" rel="stylesheet" type="text/css" /> 2 <script type="text/javascript" src="js/jquery.min.js">

设置弹出框水平、垂直居中

自制一个友好的弹出框,当点击页面某个对象时,弹出提示框,一下是设置弹出框水平和垂直居中的代码: 1 function setElementCoordinate(obj) { 2 var d_width = document.documentElement.clientWidth;//计算当前可显示屏幕的宽度 3 var d_height = document.documentElement.clientHeight;//计算当前可显示屏幕的高度 4 5 var obj_width = $(obj

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

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

bootstrap模态框垂直居中

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

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

大家好,今天我们来说一下在写模态框的时候怎么使里面的内容垂直水平居中,我们先把目光放得简单一点, 这个问题其实就等同于怎么让一个div垂直水平居中,那我们怎么来实现这个问题呢?有5种解决办法. 首先,第一种情况,我们知道div1宽高的情况下: <div id="div1"></div #div1{ width: 200px; height: 100px; background: #54fa45; position: absolute; left:50%; top:50