Question

我试图在shown.bs.modal事件中获得Bootstrap 3.3.2模态类的高度。我正在尝试加载无远程内容。

http://getbootstrap.com/javascript/#modals-events

我喜欢高度的类是.modal-dialog，.modal-header，.modal-body和.modal-footer。

我正在使用这个jQuery但它给了我一个-31或0的值作为例如.modal-dialog，这显然是错误的。

$('#myModal').on('shown.bs.modal', function () {

    var modalDialogHeight = $('.modal-dialog').height();
    console.log ('modalDialogHeight = ' + modalDialogHeight);

});

我在这里使用Bootply创建了一个示例：BS 3.3.2 How to get modal classes height on shown.bs.modal?并在示例中使用了console.log。

但是在示例中，控制台中没有显示任何内容，但在没有任何自定义的情况下在本地运行默认的BS 3.3.2模式时，日志显示错误的值或实际上为0。

尝试使用示例中的警报，但也没有显示。如果有人知道如何让它在Bootply中工作，请在评论中告诉我。

除此之外，我对于show.bs.modal和.height（）没有处理模态类感到困惑。添加

时，它确实完全有效

var viewportHeight = $(window).height();
console.log ('viewportHeight = ' + viewportHeight);

到本地示例，给我正确的高度。所以事件确实会触发，但不会出现在模态类中。

如何找出模态类的高度或为什么我的方法不起作用？

我试图找到这些类的高度的原因是我可以根据视口高度设置整个模态及其内容的高度。

这里有一个类似的问题How to get Bootstrap modal size但是我在活动结束后打电话，正如在BS网站上给出的#modal-events中所列出的那样仍然没有运气，而且这个问题的宽度也各不相同视口，窄或宽。

非常感谢您对此的任何帮助。谢谢。

Answer 1

研究：Re-center bootstrap modal vertically after content has loaded

jQuery的：

$('#myModal').on('shown.bs.modal', function () {
        var viewportHeight = $(window).height();
        console.log ('viewportHeight = ' + viewportHeight);

        var modalDialogHeight = $(this).find('.modal-dialog').outerHeight();
        console.log ('modalDialogHeight = ' + modalDialogHeight);

        var modalHeaderHeight = $(this).find('.modal-header').outerHeight();
        console.log ('modalHeaderHeight = ' + modalHeaderHeight);

        var modalBodyHeight = $(this).find('.modal-body').outerHeight();
        console.log ('modalBodyHeight = ' + modalBodyHeight);

        var modalFooterHeight = $(this).find('.modal-footer').outerHeight();
        console.log ('modalFooterHeight = ' + modalFooterHeight);       
    });

说明： Bootstrap 3.3.2显然在计算宽度和高度之前显示模态。

由于模态在被点击之前是隐藏的，因此无法获得相关模态类的宽度或高度。

一旦show.bs.modal触发了事件，就可以获得模态类的宽度和高度，并查看我的日志似乎有效。

然而为什么 $(this).find('.modal-dialog').outerHeight();有效且$('.modal-dialog').height();不起作用可能是由于此处使用的jQuery方法不同，.height（）和.outerHeight（）。虽然我必须说我确实尝试过使用.outerHeight但它没有用，所以可能是$(this).find。

注意： 我不完全确定我的错误在哪里，如果有人能够指出完全为什么我的第一种方法不起作用我会非常感激，从那时起我就能理解并更好地学习它。非常感谢您提供任何帮助评论或不同答案。

参考：jQuery .outerHeight()

顶部和底部填充和边框始终包含在.outerHeight（）计算中;如果includeMargin参数设置为true，则还包括边距（顶部和底部）。

此方法不适用于窗口和文档对象;对于   这些，请改用.height（）。

编辑： 经过一些阅读和更多编码后，我逐渐明白，当试图获得任何模态类的宽度或高度时，例如.modal-content或.modal-header，一个人真的不需要shown.bs.modal事件。

在以下代码中，当模态存在时调整窗口大小时，.modal-content宽度和高度会正确计算。

这是通过告诉jQuery在哪个父元素中实际找到要求宽度或高度的元素来实现的。

如果.find()方法不，则jQuery似乎无法真正找到有问题的元素，因此计算结果可能是错误的值，或者导致0。

当然，下面的代码可以与shown.bs.modal事件一起使用，而不必调整浏览器窗口的大小，以便日志开始给出值。这只是我本地的需求，我把它包装在带有回调的窗口调整大小函数中。

参考：jQuery .find() method

var modalContentWidthHeight = function () {

    var modalContentWidth = $('#myModal').find('.modal-content').outerWidth(true);
        console.log ('modalContentWidth = ' + modalContentWidth);

    var modalContentHeight = $('#myModal').find('.modal-content').outerHeight(true);
        console.log ('modalContentHeight = ' + modalContentHeight);     
    };

$(window).resize(modalContentWidthHeight);

Bootstrap 3.3.2如何在shown.bs.modal事件中获取模态类高度？

1 个答案: