Superposition de plusieurs modèles

je me rends compte qu'une réponse a été acceptée, mais je suggère fortement de ne pas hacker bootstrap pour corriger cela.

vous pouvez assez facilement obtenir le même effet en accrochant le montré.bs.modal et caché.bs.modal event handlers and adjusting the z-index there.

voici un exemple pratique

un peu plus d'info est disponible ici.

Cette solution fonctionne automatiquement avec arbitrairement profondément piles auxiliaires modaux.

le code source du script:

$(document).ready(function() {

    $('.modal').on('hidden.bs.modal', function(event) {
        $(this).removeClass( 'fv-modal-stack' );
        $('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) - 1 );
    });

    $('.modal').on('shown.bs.modal', function (event) {
        // keep track of the number of open modals
        if ( typeof( $('body').data( 'fv_open_modals' ) ) == 'undefined' ) {
            $('body').data( 'fv_open_modals', 0 );
        }

        // if the z-index of this modal has been set, ignore.
        if ($(this).hasClass('fv-modal-stack')) {
            return;
        }

        $(this).addClass('fv-modal-stack');
        $('body').data('fv_open_modals', $('body').data('fv_open_modals' ) + 1 );
        $(this).css('z-index', 1040 + (10 * $('body').data('fv_open_modals' )));
        $('.modal-backdrop').not('.fv-modal-stack').css('z-index', 1039 + (10 * $('body').data('fv_open_modals')));
        $('.modal-backdrop').not('fv-modal-stack').addClass('fv-modal-stack'); 

    });        
});

quelque chose de plus court version basée sur la suggestion de Yermo Lamers, cela semble bien fonctionner. Même avec des animations de base comme fade in / out et même crazy batman journal rotation. http://jsfiddle.net/ketwaroo/mXy3E /

$('.modal').on('show.bs.modal', function(event) {
    var idx = $('.modal:visible').length;
    $(this).css('z-index', 1040 + (10 * idx));
});
$('.modal').on('shown.bs.modal', function(event) {
    var idx = ($('.modal:visible').length) -1; // raise backdrop after animation.
    $('.modal-backdrop').not('.stacked').css('z-index', 1039 + (10 * idx));
    $('.modal-backdrop').not('.stacked').addClass('stacked');
});

combinant la réponse D'A1rPun avec la suggestion de StriplingWarrior, je suis venu avec ceci:

$(document).on({
    'show.bs.modal': function () {
        var zIndex = 1040 + (10 * $('.modal:visible').length);
        $(this).css('z-index', zIndex);
        setTimeout(function() {
            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);
    },
    'hidden.bs.modal': function() {
        if ($('.modal:visible').length > 0) {
            // restore the modal-open class to the body element, so that scrolling works
            // properly after de-stacking a modal.
            setTimeout(function() {
                $(document.body).addClass('modal-open');
            }, 0);
        }
    }
}, '.modal');

fonctionne même pour les modaux dynamiques ajoutés après le fait, et supprime la question du second-scrollbar. La chose la plus notable pour laquelle j'ai trouvé cela utile était l'intégration des formulaires à l'intérieur des modaux avec les retours de validation des alertes Bootbox, car ceux-ci utilisent des modaux dynamiques et exigent donc que vous liiez l'événement au document plutôt qu'à .modale, étant donné que seuls les l'attache à l'existant, les auxiliaires modaux.

Violon ici.

j'ai créé un plugin Bootstrap qui incorpore beaucoup des idées postées ici.

Démo sur Bootply: http://www.bootply.com/cObcYInvpq

Github: https://github.com/jhaygt/bootstrap-multimodal

Il aborde également la question successifs, les auxiliaires modaux causant la toile de fond pour devenir de plus en plus sombre. Cela garantit qu'une seule toile de fond est visible à tout moment heure:

if(modalIndex > 0)
    $('.modal-backdrop').not(':first').addClass('hidden');

l'index en z de la toile de fond visible est mis à jour sur les deux événements show.bs.modal et hidden.bs.modal :

$('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (modalIndex * 20));

lors de la résolution de modaux D'empilage scrolls la page principale quand on est fermé j'ai constaté que les nouvelles versions de Bootstrap (au moins depuis la version 3.0.3) ne nécessitent pas de code supplémentaire pour empiler les modaux.

vous pouvez ajouter plus d'un modal (ayant bien sûr un ID différent) à votre page. Le seul problème rencontré lors de l'ouverture de plus d'un modal sera que la fermeture d'un modal supprimera la classe modal-open pour le sélecteur de carrosserie.

vous pouvez utiliser le code Javascript suivant pour re-ajouter le modal-open :

$('.modal').on('hidden.bs.modal', function (e) {
    if($('.modal').hasClass('in')) {
    $('body').addClass('modal-open');
    }    
});

dans le cas qui n'ont pas besoin de l'effet de fond pour le modal empilé, vous pouvez définir data-backdrop="false" .

Version 3.1.1. fixe fixe arrière-plan modal superposant le scrollbar modal , mais la solution ci-dessus semble également fonctionner avec les versions précédentes.

enfin résolu. Je l'ai testé de nombreuses façons et fonctionne très bien.

Voici la solution pour tous ceux qui ont le même problème: Changer le Modal .prototype.afficher la fonction (à bootstrap.js ou modale.js)

de:

if (transition) {
   that.$element[0].offsetWidth // force reflow
}   

that.$element
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

à:

if (transition) {
    that.$element[0].offsetWidth // force reflow
}

that.$backdrop
   .css("z-index", (1030 + (10 * $(".modal.fade.in").length)))

that.$element
   .css("z-index", (1040 + (10 * $(".modal.fade.in").length)))
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

C'est le meilleur moyen que j'ai trouvé: vérifier combien les auxiliaires modaux sont ouverts et changer l'indice z du modal et de la toile de fond à une valeur plus élevée.