Bootstrap modal en arrière-plan

le problème concerne le positionnement des conteneurs de base. Vous pouvez facilement "déplacer" votre modal hors de ces conteneurs avant de l'afficher. Voici comment le faire si vous étiez show dans votre modal en utilisant js:

$('#myModal').appendTo("body").modal('show');

ou, si vous lancez modal en utilisant des boutons, laisser tomber le .modal('show'); et juste faire:

$('#myModal').appendTo("body") 

cela maintiendra toutes les fonctionnalités normales, vous permettant d'afficher le modal à l'aide d'un bouton.

j'ai essayé toutes les options fournies ci-dessus mais je ne l'ai pas fait fonctionner en utilisant ceux.

Ce n'travail: réglage de la z-index de l' .modale de toile de fond à -1.

.modal-backdrop {
  z-index: -1;
}

aussi, assurez-vous que la version de BootStrap css et js sont les mêmes. Différentes versions peuvent également faire apparaître modal en arrière-plan:

par exemple:

Mauvais:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Bonne:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

j'ai également rencontré ce problème et aucune des solutions n'a fonctionné pour moi jusqu'à ce que je me suis rendu compte que je n'ai pas vraiment besoin d'une toile de fond. Vous pouvez facilement supprimer la toile de fond avec le code suivant.

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Note : l'attribut data-backdrop doit être défini à false ( autres options : static ou true ).

j'ai réussi à le faire fonctionner en donnant un indice z élevé à la fenêtre modale après l'avoir ouverte. Par exemple:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");

la Solution fournie par @Muhd est la meilleure façon de le faire. Mais si vous êtes coincé dans une situation où changer la structure de la page n'est pas une option, Utilisez cette astuce:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

le truc ici est data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" en supprimant la toile de fond par défaut et en créant un mannequin en réglant la couleur de fond de la boîte de dialogue elle-même avec un alpha.

mise à Jour 1: Comme fait remarquer par @Gustyn que cliquer sur l'arrière-plan ne ferme pas le dialogue comme prévu. Pour ce faire, vous devez ajouter du code de script java. Voici quelques exemples de la façon dont vous pouvez y parvenir.

$('.modal').click(function(event){
    $(event.target).modal('hide');
});

A mais tardivement sur ce Mais voici une solution générique -

    var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

visitez ce lien - Bootstrap 3 - modal disparition ci-dessous toile de fond lorsque vous utilisez une barre latérale fixe pour les détails.

une autre façon d'aborder cette question Est de supprimer l'index-z du .modal-backdrop dans bootstrap.CSS. Cela fera que la toile de fond sera au même niveau que le reste de votre corps (il va encore s'estomper) et votre modal sera au-dessus.

.modal-backdrop ressemble à ceci

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}

il suffit d'ajouter deux lignes de CSS:

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

The .modal-backdrop devrait avoir une valeur 1050 pour le placer sur la barre de navigation.

j'ai simplement mis:

#myModal {
    z-index: 1500;
}

et ça marche....

pour la question initiale:

.my-module {
    z-index: 1500;
}

ce problème peut souvent être ressenti lors de l'utilisation de choses comme des gradients dans CSS pour des choses comme des fonds ou même des têtes d'accordéon.

malheureusement, la modification ou l'annulation de CSS core Bootstrap est indésirable, et peut conduire à des effets secondaires indésirables. L'approche la moins intrusive est d'ajouter data-backdrop="false" mais vous pouvez remarquer que l'effet de fondu ne fonctionne plus comme prévu.

après les récentes versions de Bootstrap, version 3.3.5 semble résoudre ce problème sans effets secondaires indésirables.

télécharger: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

assurez-vous d'inclure les fichiers CSS et JavaScript de 3.3.5.

Salut j'ai eu le même problème puis je me rends compte que lorsque vous utilisez bootsrap 3.1 Contrairement aux anciennes versions de bootsrap (2.3.2) la structure html du modal a été modifiée!

vous devez envelopper votre corps d'en-tête modal et le pied de page avec le Dialogue modal et le contenu modal

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>

j'ai eu ce problème et la façon la plus facile de le corriger était d'ajouter z-index plus grand que 1040 sur le Dialogue modal div:

<div class="modal-dialog" style="z-index: 1100;">

je crois que bootstrap créer un div modal-backdrop fade dans lequel dans mon cas a le z-index 1040, donc si vous mettez le dialogue modal sur le dessus de cela, il ne devrait pas être gris out plus.

utilisez ceci dans votre modal:

data-backdrop="false" 

aucune des solutions suggérées ci-dessus n'a fonctionné pour moi, mais cette technique a résolu le problème:

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
}); 

règle le z-index .modal à la valeur la plus élevée

par exemple, .sidebarwrapper a l'index z de 1100, donc mettez l'index z de .modal à 1101

.modal {
    z-index: 1101;
}

j'ai une solution plus légère et meilleure..

Il pourrait être facilement résoudre par le biais de certains autres styles CSS..

1. cacher la classe .modal-backdrop (auto-générée à partir de Bootstrap.js)

   .modal-backdrop
   {
   display:none;
   visibility:hidden; 
   position:relative
   }
   

2. placez le fond de .modal sur une image de fond noir translucide.

   .modal
   {
   background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
   // translucent image from google images 
   z-index:1100; 
   }
   

cela fonctionnera mieux si vous avez une exigence qui nécessite que le modal soit à l'intérieur d'un élément et non près de l'étiquette </body> ..

dans mon cas, résolvez-le, ajoutez ceci dans ma feuille de style:

.modal-backdrop{
  z-index:0;
}

avec Google debugger, peut examiner la toile de fond de l'élément et modifier les attributs. Goog luck.

dans votre navbar navbar-fixed-top besoin z-index = 1041 et aussi si u utiliser bootstarp-combined.min.css le changement aussi .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

Changement de la position absolue relative.

.modal-backdrop {
    position: relative;
    /* ... */
}

vous pouvez également supprimer l'index-z.modal-toile de fond. La css résultante ressemblerait à ceci.

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }

ce que je trouve est que:

dans bootstrap 3.3.0 ce n'est pas juste,mais dans bootstrap 3.3.5 c'est juste.nous allons voir le code. 3.3.0:

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

  this.$backdrop = $(document.createElement('div'))
        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)

$('.modal').insertAfter($('body'));

cela couvrirait toutes les modales sans gâcher aucune des animations ou des comportements attendus..

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});

dans mon cas, j'avais une enveloppe avec ce qui suit:

.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}

n'a supprimé que l'index-z:1 et n'a aucune idée de la raison pour laquelle le problème a été résolu. aussi pour sûr supprimer la position relative a fait, mais j'en avais besoin.

dans mon cas, la cause était boostrap.min.css:) une fois que je l'ai exclu de mon fichier html comme référence, la boîte de dialogue a affiché forn de l'ombre modale:)

j'ai supprimé le fond modal.

.modal-backdrop {
    display:none;
}

ce n'est pas une meilleure solution, mais ça marche pour moi.

je a été résolu par l'ajout de style ci-dessous pour balise DIV

style="background-color: rgba(0, 0, 0, 0.5);"

et ajouter custom css

.modal-backdrop {position: relative;}

essayez la classe overwrite .modal-ouvert de dépassement de la valeur de caché visible.

.modal-open {
    overflow: visible;
}