如何获得bootstrap模态大小

Question

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?

Answer 1

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:

<div id="my_modal" class="modal-dialog modal-lg" data-size="modal-lg">

Then access it via 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!