javascript 如何获得引导模态大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28198035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get bootstrap modal size
提问by mlewis54
I have a bootstrap modal whose size is set by:
我有一个引导模式，其大小设置为：
<div class="modal-dialog modal-lg">
I want to be able to determine the modal's size (width actually) before I make a post request to a PHP program to display some dynamic content before displaying the modal. Does anyone know how to get this information?
我希望能够在向 PHP 程序发出请求以在显示模态之前显示一些动态内容之前确定模态的大小（实际上是宽度）。有谁知道如何获得这些信息？
回答by lowtechsun
I have also been trying to find either the width or height of the entire modal as well as the modal classes and found this solution. Though I must add that with this approach the width and height of the modal are only found afterit has loaded.
我也一直试图找到整个模态的宽度或高度以及模态类并找到了这个解决方案。虽然我必须补充一点，使用这种方法，模态的宽度和高度只能在加载后才能找到。
I think that it is not possible to get the correct width and height of the modal beforeit is being displayed since it is hidden by default beforethe user clicks to open it. style="display: none;as inline style under the modal class in Bootstrap 3.3.2.
我认为在显示模式之前不可能获得正确的宽度和高度，因为它在用户单击打开它之前默认是隐藏的。style="display: none;作为 Bootstrap 3.3.2 中模态类下的内联样式。
However if you like to get the correct width and height of modal once it is displayed you can use this approach.
但是，如果您想在显示模态后获得正确的宽度和高度，则可以使用此方法。
// once the modal has loaded all calculations can start
// since the modal is hidden before it is loaded there are
// no dimesions that can be calculated unfortunately
$('#myModal').on('shown.bs.modal', function () {
// get the viewport height
var viewportHeight = $(window).height();
console.log ('viewportHeight = ' + viewportHeight);
// get the viewport width
var viewportWidth = $(window).width();
console.log ('viewportWidth = ' + viewportWidth);
// get the .modal-dialog height and width
// here the .outerHeight() method has to be used instead of the .height() method
// see https://api.jquery.com/outerwidth/ and
// https://api.jquery.com/outerheight/ for reference
// also the .find() method HAS to be used, otherwise jQuery won't find
// the correct element, this is why you got strange values beforehand
var modalDialogHeight = $(this).find('.modal-dialog').outerHeight(true);
console.log ('modalDialogHeight = ' + modalDialogHeight);
var modalDialogWidth = $(this).find('.modal-dialog').outerWidth(true);
console.log ('modalDialogWidth = ' + modalDialogWidth);
// I have included a simple function to log the width and height
// of the modal when the browser window is being resized
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);
});
I hope the above code somehow helps you figure out the modal dimensions and that you can take it from there..
我希望上面的代码能以某种方式帮助您找出模态尺寸，并且您可以从那里获取它。
Another thing that was really buggingme that you might encounter when using the Bootstrap 3.3.2 modal. If you like to get rid of this bug Open modal is shifting body content to the left #9855 concerning the modal position and given this bug it still not fixed Modify scrollbar check, stop static nav shift #13103 you can use this approach that works regardless of if you have a vertical scrollbar shown or not.
在使用 Bootstrap 3.3.2 模式时可能会遇到的另一件真正困扰我的事情。如果你想摆脱这个 bug Open modal 正在将 body 内容向左移动 #9855关于模态位置，并且这个 bug 仍然没有修复修改滚动条检查，停止静态导航移动 #13103你可以使用这种方法，不管它如何工作是否显示垂直滚动条。
Reference: Bootstrap 3.3.2 Center modal on all viewport sizes with or without vertical scrollbar
参考：Bootstrap 3.3.2 Center modal on all viewport size with or without vertical scrollbar
$('#myModal').on('shown.bs.modal', function () {
// meassure the padding-right given by BS and apply it as padding-left to the modal
// like this equal padding on either side of the modal is given regardless of media query
var modalPaddingRight = $('#myModal').css('padding-right');
console.log ('modalPaddingRight = ' + modalPaddingRight);
// apply the padding value from the right to the left
$('#myModal').css('padding-left', modalPaddingRight);
console.log (
'modalPaddingLeft = ' + $('#myModal').css('padding-left') +
' modalPaddingRight = ' + $('#myModal').css('padding-right')
);
// apply equal padding on window resize
var modalPaddingLeft = function () {
var modalPaddingRight = $('#myModal').css('padding-right');
console.log ('modalPaddingRight = ' + modalPaddingRight);
$('#myModal').css('padding-left', modalPaddingRight);
console.log (
'modalPaddingLeft = ' + $('#myModal').css('padding-left') +
'modalPaddingRight = ' + $('#myModal').css('padding-right')
);
};
$(window).resize(modalPaddingLeft);
});
I hope some of this answer can help you. Since I am new to jQuery there might be better or more elegant ways to actually code this, though I would not know how at this stage. Nevertheless I think the information given here might be of help to you.
我希望这个答案中的一些可以帮助你。由于我是 jQuery 的新手，因此可能有更好或更优雅的方法来实际编写代码，尽管在现阶段我不知道该怎么做。尽管如此，我认为这里提供的信息可能对您有所帮助。
回答by Tim Lewis
If you want the actual dimensions of an element using Javascript, JQuery has the built in .width()and .height()functions. I modified your <div>to add a data-attribute that has the bootstrap class incase you want to access that and an ID for easier access:
如果您想使用 Javascript 获取元素的实际尺寸，JQuery 具有内置的.width()和.height()函数。我修改了您<div>以添加一个data-具有引导类的属性，以防您想访问该类和一个 ID 以便于访问：
<div id="my_modal" class="modal-dialog modal-lg" data-size="modal-lg">
Then access it via Javascript:
然后通过Javascript访问它：
var width = $("#my_modal").width();
var height = $("#my_modal").height();
var size = $("#my_modal").attr("data-size");
console.log("Width Is: " + width + " and Height Is:" + height + "and Size Is:" + size);
Hope that helps!
希望有帮助！
