Bootstrap 3.3.2如何在shows.bs.modal事件中获取模态类的高度? [英] Bootstrap 3.3.2 How to get modal classes height on shown.bs.modal event?

问题描述

我正在尝试在shows.bs.modal事件上获取Bootstrap 3.3.2模态类的高度.我正在尝试加载没有远程内容.

I am trying to get the height of the Bootstrap 3.3.2 modal classes on the shown.bs.modal event. There is no remote content I am trying to load.

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

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

The classes I like to have the height for are .modal-dialog, .modal-header, .modal-body and .modal-footer.

我正在使用jQuery的这个位，但是它给我的高度的值是-31或0. .modal-dialog，这显然是错误的.

I am using this bit of jQuery but it gives me a value of either -31 or 0 for the height of the e.g. .modal-dialog and that is obviously wrong.

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

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

});

我在这里用Bootply创建了一个示例: BS 3.3.2如何在shows.bs上获取模态类的高度.模态?，并在示例中使用了console.log.

I have created an example with Bootply here: BS 3.3.2 How to get modal classes height on shown.bs.modal? and used console.log in the example.

但是在示例中，控制台上没有任何显示，尽管在本地运行默认BS 3.3.2模态而没有任何自定义时，日志实际上显示了错误的值或0.

However in the example nothing shows in the console though when running the default BS 3.3.2 modal locally without any customisations the log shows the wrong values or 0 in fact.

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

Tried using alert in the example but that also does not show. If anyone has a clue how to get this to work in Bootply let me know in a comment please.

除此之外，我对show.bs.modal和.height()不适用于模态类感到困惑.添加时完全起作用

Apart from that I am puzzled about the shown.bs.modal and .height() not working on the modal classes. It does fully work when adding

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

以本地示例为例，给我正确的高度.因此事件确实会触发，但是不会在模式类上触发.

to the local example, giving me the correct height. So the event does fire, however not on the modal classes.

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

How can I find out the height of the modal classes or why is my approach not working?

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

The reason I am trying to find the height of those classes is so that I can style the height of the entire modal and its content depending on the viewport height.

这里有一个类似的问题如何获取Bootstrap模态大小事件发生后，我正在打电话，就像BS网站上给出的#modal-events中所指出的那样，仍然没有运气，而且视口的各种宽度(窄或宽)也是如此.

There is a similar question here How to get Bootstrap modal size however I am calling after the event, just as lined out in the #modal-events given on the BS site and still no luck, and this as well with various widths of the viewport, narrow or wide.

非常感谢您提供任何帮助，谢谢.

Any help with this is much appreciated, thank you.

推荐答案

研究:在内容加载后垂直重新引导引导模式

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显然会在计算模态的宽度和 height 之前显示模态.

Explanation: Bootstrap 3.3.2 apparently shows the modal before calculating its width and height.

由于模态一直被隐藏，直到被单击为止，因此不可能获得有关模态类的宽度或 height .

Since the modal is hidden until it is being clicked it is impossible to get the width or height of the modal classes in question.

一旦显示的事件.bs.modal被触发，就有可能获取模态类的宽度和高度，并查看我的日志，它似乎可以正常工作.

Once the event shown.bs.modal has fired it is possible to get the width and height of the modal classes and looking at my log it seems to work.

但是为什么 $(this).find('.modal-dialog').outerHeight();有效而$('.modal-dialog').height();不起作用可能是由于此处使用的jQuery方法不同，.height()和.outerHeight().尽管我必须说我也尝试过使用.outerHeight并且它没有用，所以可能是由于$(this).find造成的.

However why $(this).find('.modal-dialog').outerHeight(); works and $('.modal-dialog').height(); does not work might be due to the different jQuery methods used here, .height() and .outerHeight(). Though I must say that I did try using .outerHeight as well and it did not work, so it could be due to $(this).find.

注意: 我不确定自己的错误在哪里，如果有人能确切地指出为什么我的第一种方法行不通，我将非常感激，因为从那时起我可以更好地理解和学习这一点.因此，感谢您提供任何有帮助的意见或不同的答案.

Attention: I am not entirely sure where my mistake was and if anyone can point out exactly why my first approach did not work I would be highly thankful, since then I can understand and learn this better. So thank you for any helping comments or different answers.

参考: jQuery .outerHeight()

.outerHeight()计算中始终包括顶部和底部的填充以及边框；如果includeMargin参数设置为true，则还包括边距(顶部和底部).

The top and bottom padding and border are always included in the .outerHeight() calculation; if the includeMargin argument is set to true, the margin (top and bottom) is also included.

此方法不适用于窗口和文档对象；为了 这些，请改用.height().

This method is not applicable to window and document objects; for these, use .height() instead.

经过一番阅读和更多的编码后，我逐渐了解到，当尝试获取任何模式类(例如.modal-content或.modal-header)的宽度或高度时，实际上并不需要shown.bs.modal事件.

After some reading and more coding I have come to understand that when trying to obtain either the width or the height of any of the modal classes, like .modal-content or .modal-header, for example, one does not really need the shown.bs.modal event.

在下面的代码中，当出现模态时，调整窗口大小时，.modal-content的宽度和高度是正确计算的.

In the following code the .modal-content width and height are calculated correctly when resizing the window when the modal is present.

这是通过告诉jQuery在哪个父元素中实际查找需要其宽度或高度的元素来实现的.

This is accomplished by telling jQuery in what parent element to actually find the element whose width or height is wanted.

如果.find()方法未使用 ，则jQuery似乎无法真正到达所涉及的元素，因此计算结果要么为错误值，要么为0.

If the .find() method is not used it seems that jQuery cannot really get to the element in question and thus the calculations either are wrong values or result in 0.

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

Of course the code below can be used with the shown.bs.modal event to not have to resize the browser window for the log to start giving values. It is simply for my needs locally that I wrapped this in a window resize function with a callback.

参考: jQuery .find()方法

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如何在shows.bs.modal事件中获取模态类的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！