爱猫家

bootstrap modal模态框垂直居中

奇谭 2017-04-09 评论

bootstrap的模态框默认是没有垂直居中的,网上有各种垂直居中的方法,甚至有的是暴力方法,直接修改bootstrap的js文件
这种方法实在太暴力了,所以推荐下面这种方法
Vertically Centering Bootstrap Modals

新建js文件,内容如下:

/**
 * Vertically center Bootstrap 3 modals so they aren't always stuck at the top
 */
$(function() {
    function reposition() {
        var modal = $(this),
            dialog = modal.find('.modal-dialog');
        modal.css('display', 'block');

        // Dividing by two centers the modal exactly, but dividing by three 
        // or four works better for larger screens.
        dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
    }
    // Reposition when a modal is shown
    $('.modal').on('show.bs.modal', reposition);
    // Reposition when the window is resized
    $(window).on('resize', function() {
        $('.modal:visible').each(reposition);
    });

然后在需要垂直居中模态框的页面引入该文件即可

发表评论

Hot Posts

Latest Comments

water 08月09日
 《基于saltstack开发的SOMSSH发布平台》 中的评论

版主https://github.com/qitan/SOMS 上边不是最新的吗?运行和你这显示的不一样哇。

打酱油的二师兄 05月08日
 《基于saltstack开发的SOMSSH发布平台》 中的评论

您好,想请教一下 配置salt-master 我这里把soms解压到了/data/wwwroot下 这个目录就是github中的SOMS项目?如果是的话,为什么没有/soms/saltconfig/*.conf的文件?

jja 09月25日
 《基于django的saltstack自动化运维平台SOMS》 中的评论

"上传的Html页面通过js限制了类型" 那个txt不是没有限制吗?所有的文件上传都提示上传失败

zander 07月21日
 《Django嵌套评论-icomments》 中的评论

这个好呀。学习一下,我是新手,才学django,收藏大神您了。

franjia 07月19日
 《基于django的saltstack自动化运维平台SOMS》 中的评论

你好,请问远程管理部分,目标主机是分组后的多个机器的话,执行命令后的返回信息如下: post tgt_select lcb-u-assets arg pwd check_type panel-group 源代码 tgt_select=lcb-u-assets&arg=pwd&check_type=panel-group 响应返回是{},空,是什么原因呢?