Comment obtenir bootstrap taille modale

J'ai aussi essayé de trouver la largeur ou la hauteur de l'ensemble du modal ainsi que le modal classes et a trouvé cette solution. Même si je dois ajouter qu'avec cette approche, la largeur et la hauteur de l'modal ne se trouvent après il a chargé.

Je pense qu'il n'est pas possible d'obtenir la bonne largeur et la hauteur de l'modal avant elle est affichée, car il est masqué par défaut avant l'utilisateur clique pour l'ouvrir. style="display: none; comme de style en ligne en vertu de la classe modale dans le Bootstrap 3.3.2.

Toutefois, si vous désirez obtenir la bonne largeur et la hauteur de modal une fois qu'il est affiché, vous pouvez utiliser cette approche.

    //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);

    });

J'espère que le code ci-dessus en quelque sorte vous aide à comprendre le modal dimensions et que vous pouvez le prendre à partir de là..

Une autre chose qui a été vraiment énerve moi que vous pourriez rencontrer lors de l'utilisation du Bootstrap 3.3.2 modal. Si vous voulez vous débarrasser de ce bug Ouvrir modal, c'est déplacer le contenu du corps vers la gauche #9855 concernant la position modale et compte tenu de ce bug toujours pas corrigé Modifier la barre de défilement vérifier, arrêt statique nav maj #13103 vous pouvez utiliser cette approche qui fonctionne indépendamment de si vous avez une barre de défilement verticale ou non démontré.

Référence: Bootstrap 3.3.2 Centre modal sur toutes les fenêtre d'affichage tailles, avec ou sans barre de défilement verticale

$('#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);
});

J'espère qu'une partie de cette réponse peut vous aider. Depuis, je suis nouveau sur jQuery il y a peut être mieux ou plus élégante des façons de fait du présent code, même si je ne sais pas comment à ce stade. Néanmoins, je pense que l'information donnée ici peut-être vous aider.