Modal bootstrap apparaissant en arrière-plan

576

J'ai utilisé le code pour mon modal directement à partir de l'exemple Bootstrap, et n'ai inclus que le bootstrap.js (et non bootstrap-modal.js). Cependant, mon modal apparaît sous le fondu gris (toile de fond) et n'est pas modifiable.

Voici à quoi ça ressemble:

modal se cachant derrière la toile de fond

Voir ce violon pour une façon de reproduire ce problème. La structure de base de ce code est la suivante:

<body>
    <p>Lorem ipsum dolor sit amet.</p>    

    <div class="my-module">
        This container contains the modal code.
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>
body {
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
}

Des idées pourquoi c'est ou ce que je peux faire pour résoudre ce problème?

javascript css twitter-bootstrap modal-dialog natlines
la source
Au cas où quelqu'un d'autre chercherait un certain temps des balises ouvertes, etc. essayant de comprendre pourquoi cela se produisait, pour moi, c'était l'extension Feedly Chrome qui a cassé mes modaux. La désactivation de l'extension a ramené le comportement à la normale.
Threeve
Dans le cas où le problème était sur iOS et provoqué par overflow-x: hiddenappliqué au conteneur du modal.
idmean
1
Créé 3 exemples à travers 3 versions. 3.3.1 fonctionne bien et les autres non. Version 3.3.1 jsfiddle Version 3.3.5 jsfiddle Version 3.3.6 jsfoddle
Dimitry
1
La création d'un rapport de bogue avec l'équipe Bootstrap semble que ce n'est pas vraiment un bogue, même si cela fonctionnait bien en 3.3.1. Vous pouvez en savoir plus à ce sujet dans le lien que j'ai publié.
Dimitry
Un article de blog intéressant toute personne confrontée à ce problème weblog.west-wind.com/posts/2016/Sep/14/…

Réponses:

629

Si le conteneur modal a une position fixe ou relative ou se trouve dans un élément avec une position fixe ou relative, ce problème se produit.

Assurez-vous que le conteneur modal et tous ses éléments parents sont positionnés par défaut pour résoudre le problème.

Voici quelques façons de procéder:

  1. Le moyen le plus simple consiste à déplacer simplement le div modal de sorte qu'il se trouve à l'extérieur de tout élément avec un positionnement spécial. Un bon endroit pourrait être juste avant la balise de fermeture du corps </body>.
  2. Vous pouvez également supprimer les position:propriétés CSS du modal et de ses ancêtres jusqu'à ce que le problème disparaisse. Cependant, cela pourrait changer l'apparence et le fonctionnement de la page.
Muhd
la source
24
Bonne prise. Pour info, non seulement "fixe", la position du parent "relative" est également à l'origine de ce problème
Giang Nguyen
3
@Muhd comment vous assurez-vous que lui et tous ses éléments parents sont positionnés par défaut?
indago
4
Préférez utiliser l'option 1: "déplacez simplement le div modal pour qu'il soit en dehors de tout élément avec un positionnement spécial". Thx
mpgn
9
Je ne comprends pas cette réponse. Les exemples Bootstrap montrent une division modale avec un certain nombre de classes le long de la ligne de "modal", "modal-fade", etc. Alors, comment le déplacement du conteneur modal va-t-il changer quoi que ce soit, lorsque .modal définit la position: fixe?
Carlos
4
j'ai encore ce problème. Je l'ajoute juste avant </body>et bodyn'ai aucun positionattribut de style. Une autre idée?
Tuan Anh Tran
383

Le problème est lié au positionnement des conteneurs parents. Vous pouvez facilement "déplacer" votre modal hors de ces conteneurs avant de l'afficher. Voici comment le faire si vous showutilisiez votre modal avec js:

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

Ou, si vous lancez modal à l'aide des boutons, déposez le .modal('show');et faites simplement:

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

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

Adam Albright
la source
12
Utilisez ce gestionnaire d'événements générique pour faire fonctionner la solution @leandrotk pour tous les modaux que vous pouvez avoir dans une page $('.modal-dialog').parent().on('show.bs.modal', function(e){ $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
Patrick M.
2
@PatrickM. Incroyable! qui a fonctionné comme un charme sur un vieux projet que je reprends et il y avait des modaux partout!
denislexic
5
Cela fonctionne très bien lorsque vous ne pouvez vraiment pas corriger le positionnement CSS. Merci :)
alexcasalboni
Y a-t-il une raison pour laquelle je perds tout le formatage CSS lorsque je fais cela? Et une solution facile? :-)
Eugene van der Merwe
1
De la réponse leandrotk, changez simplement #myModal en .modal pour ressembler à ceci: $ ('. Modal'). AppendTo ("body"). Cela fonctionnera avec tous les modaux car ils ont un modal de classe par défaut.
Ngatia Frankline du
170

J'ai essayé toutes les options fournies ci-dessus, mais je ne l'ai pas fait fonctionner avec celles-ci.

Ce qui a fonctionné: définir le z-index du .modal-backdrop sur -1.

.modal-backdrop {
  z-index: -1;
}
Jan van der Burgt
la source
10
Cela a parfaitement fonctionné et est de loin la solution la plus simple. J'ai utiliséz-index: 0;
andrewcockerham
Peut également confirmer que seule cette option fonctionne! Merci!
Ferry Kranenburg
Merci! Est-ce un bug sur BS3?
mauriblint
1
Cela ne fonctionne pas si vous utilisez un thème qui a de nombreux index z différents. Par exemple, si vous définissez la toile de fond sur -1, elle apparaîtra derrière d' autres éléments de la page, tels que des panneaux. Mais le régler pour le 3faire au-dessus de tout, sauf le popup modal.
Justin Skiles du
1
J'ai également trouvé que c'était la méthode la plus rapide après avoir épuisé les suggestions des réponses notées plus haut. Dans mon cas, définir le div avec la classe de dialogue modal sur un z-index de 1060 l'a fait apparaître devant la superposition. Si vous utilisez la barre de navigation, vous voudrez déplacer le modal au-dessus de la superposition et non l'inverse, sinon votre barre de navigation pourrait apparaître au-dessus de la superposition ... du chaos insues ...
Mike Devenney
152

Assurez-vous également que les versions de BootStrap css et js sont les mêmes. Différentes versions peuvent également faire apparaître le 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>

Bien:

<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>
Sid
la source
C'était aussi pour moi. Merci!
PedroTanaka
Juste eu le même problème, la même solution de feuille de style de version semble avoir aidé tout le monde! Merci
HGB
Merci, c'était mon problème exact
Malcor
Malcor aucun problème, j'ai passé beaucoup de temps pendant que je résolvais ce bug. Comme nous le voyons, c'était en '14, maintenant '16, le bug existe toujours. En fait, ce n'est pas un bug, mais dans le bootstrap, les auteurs devraient l'ajouter dans leur documentation ou quelque chose comme ça.
Sid
Même chose ici, nous sommes passés à la génération de notre SASS et avons complètement oublié le fichier js lui-même .. Cela doit être la meilleure réponse .. Comme notre modal est toujours par défaut inclus juste avant la balise de fermeture du corps ...
Angry 84
116

J'ai également rencontré ce problème et aucune des solutions n'a fonctionné pour moi jusqu'à ce que je comprenne que je n'ai en fait pas besoin de 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>

Remarque : l' data-backdropattribut doit être défini sur false( autres options : staticou true).

PieterVK
la source
2
De loin la solution la plus simple et fonctionne comme un charme!
learning_to_swim
Brillant! J'avais également besoin d'exiger le bootstrap - je ne sais pas pourquoi toutes mes autres fonctionnalités de Bootstrap fonctionnent bien, mais j'avais besoin de faire fonctionner le modal.
steve klein
Parfait !!! lutté pendant un jour .. et u m'a sauvé un autre jour. Merci encore .. +1 et bravo
Bhaskara
1
Après avoir lu attentivement toutes les solutions, j'ai trouvé que c'était la plus raisonnable de la version actuelle de bootstrap et de jQuery. Je vous remercie.
Cryptage
3
Je vous remercie! Cette question a plus de 140 000 vues et je ne comprends pas pourquoi le bootstrap ne peut pas résoudre ce problème. eh bien, bravo.
Chad
58

Je l'ai fait fonctionner en donnant une valeur d'index z élevée à la fenêtre modale APRÈS l' ouvrir. Par exemple:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
Andrew Dyster
la source
Ça marche (l'homme dit que c'est le cas), pourquoi votez-vous contre? Comme je le regarde, il semble que ce sera le cas.
Rolice
Oui, quelqu'un peut-il expliquer pourquoi c'est une mauvaise réponse? Est-ce juste que c'est un peu hacky?
brandones
6
Je ne comprends pas les votes négatifs. Oui, c'est hacky mais les autres solutions n'ont pas fonctionné pour moi, alors j'ai pensé que cela contribuerait aux personnes qui ne craignent pas d'utiliser des solutions "hacky" pour simplement faire fonctionner la fichue chose.
Andrew Dyster du
C'était un aperçu pertinent de mon problème particulier de mettre un modal sur un élément plein écran. +1
Jack Stone
3
C'est une mauvaise réponse car c'est un hack et ne fait aucune tentative pour l'indiquer. D'autres réponses disent: "si rien d'autre ne fonctionne, vous pourriez ...". La réalité est que le modal est très largement utilisé sur le Web et devrait fonctionner s'il est correctement mis en œuvre. Les réponses farfelues n'aident pas les gens à trouver comment faire les choses correctement.
Lukos
35

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>

L'astuce ici consiste data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" à supprimer le fond par défaut et à en créer un factice en définissant la couleur d'arrière-plan de la boîte de dialogue elle-même avec un peu d'alpha.

Mise à jour 1: Comme l'a souligné @Gustyn, cliquer sur l'arrière-plan ne ferme pas la boîte de dialogue comme prévu. Donc, pour y parvenir, vous devez ajouter du code de script java. Voici un exemple de la façon dont vous pouvez y parvenir. 

$('.modal').click(function(event){
    $(event.target).modal('hide');
});
Krishnendu
la source
Cela fonctionne sauf que cliquer sur l'arrière-plan ne ferme pas la boîte de dialogue comme prévu.
Gustyn
Krishnendu u est mon héros. Je suis venu travailler avec le malheur et la tristesse en tête. 3 jours avant ma présentation finale pour faire face à ce problème tout d'un coup, c'était pour le moins angoissant. U mon ami mérite 100 000 upvotes hélas ne peut en donner qu'un :) passez une merveilleuse journée bénie.
DotNetBeginner
Lorsque j'essaie, cela ne couvre pas l'arrière-plan complet de la page - juste l'élément div dans lequel le modal est déclaré.
Will Sam
Fonctionne parfaitement. Je vous remercie!
gfernandes
Fonctionne parfaitement. Je vous remercie!
Mayank Pandeyz
16

A mais en retard, 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 - la disparition du modal sous la toile de fond lors de l'utilisation d'une barre latérale fixe pour plus de détails.

Rohan
la source
C'était une solution parfaite pour un plugin Wordpress que je créais où je ne pouvais pas contrôler les éléments parents sur les thèmes d'autres personnes.
Mark Rummel
Jusqu'à présent, la meilleure solution!
digz6666
10

Une autre façon de procéder consiste à supprimer le z-index du .modal-backdropfichier bootstrap.css. Cela fera en sorte que la toile de fond soit au même niveau que le reste de votre corps (elle s'effacera toujours) et que votre modal soit au sommet.

.modal-backdrop ressemble à ça

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}
Samuel Bergeron
la source
10

Ajoutez simplement deux lignes de CSS:

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

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

Wahyu Primadi
la source
Bien, mais si le conteneur des modaux a position: fixedcela ne fonctionnera pas.
CPHPython
10

Cela couvrirait tous les modaux sans gâcher aucune des animations ou du comportement attendu. 

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});
Cam Tullos
la source
1
solution globale. mais il vaut mieux trouver le problème.
Milad Abooali
Je ne pense pas que ce soit une excellente solution, qu'en est-il des pages avec beaucoup de modaux? Pourrait devenir désordonné.
Glen
Pouvez-vous expliquer comment cela deviendrait désordonné? Tout ce qu'il fait, c'est déplacer le modal de l'endroit où il se trouve actuellement dans le DOM à la fin de la balise body. Il ne crée rien qui ne soit pas déjà là, il suffit de le déplacer et de lui donner automatiquement le z-index supérieur.
Cam Tullos
Meilleure solution, je pense. pas besoin de modifier les css et de changer l'apparence modale
Moslem7026
8

J'ai simplement défini:

#myModal {
    z-index: 1500;
}

et il fonctionne....

Pour la question d'origine: 

.my-module {
    z-index: 1500;
}
AmintaCode
la source
Mon problème était aussi le z-index.
James Lock
8

Utilisez ceci dans votre modal: 

data-backdrop="false"
Jonathan
la source
8

Ce problème peut souvent être rencontré lors de l'utilisation d'éléments tels que les dégradés en CSS pour des éléments tels que les arrière-plans ou même les en-têtes d'accordéon.

Malheureusement, la modification ou la substitution du CSS Bootstrap de base n'est pas souhaitable et peut entraîner des effets secondaires indésirables. L'approche la moins intrusive est d'ajouter, data-backdrop="false"mais vous remarquerez peut-être que l'effet de fondu ne fonctionne plus comme prévu.

Après avoir suivi les dernières versions de Bootstrap, la version 3.3.5 semble résoudre ce problème sans effets secondaires indésirables.

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

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

Richard Nalezynski
la source
6

Salut, j'ai eu le même problème alors 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 et pied de page d'en-tête modal avec modal-dialog et modal-content 

<div class="modal hide fade">

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

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

    </div>
  </div>

 </div>
talsibony
la source
+1 assurez-vous que vous utilisez des versions compatibles de bootstrap.css et bootstrap.js et que votre balisage correspond à la version que vous utilisez.
srayner
Oui, c'est ma conclusion et je l'ai écrit ici juste si quelqu'un avait ce problème.
talsibony
Jésus-Christ, cette réponse est profondément enfouie. Même cas pour Bootstrap 4.
Randell
6

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);
});
Javed Iqbal
la source
Je préfère cette façon parce que j'ai perdu le formatage CSS avec les autres méthodes.
Eugene van der Merwe
6

J'ai eu ce problème et le moyen le plus simple de le résoudre était addind z-index supérieur à 1040 sur la division modal-dialog:

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

Je crois que le bootstrap crée un fondu de fond modal div dans lequel, dans mon cas, a le z-index 1040, donc si vous mettez la boîte de dialogue modale au-dessus de cela, elle ne devrait plus être grisée.

Chris Rosete
la source
6

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

Il pourrait être facilement résolu grâce à certains styles CSS supplémentaires.

  1. masquer la classe .modal-backdrop(généré automatiquement à partir de Bootstrap.js)

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

  2. définir l'arrière-plan d' .modalune 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 la </body>balise.

JM Tee
la source
Vous m'avez sauvé la journée ... C'est une belle alternative!
notme
@xunga, pas de soucis. veuillez partager cette solution avec d'autres personnes :)
JM Tee
vous pouvez voir les modifications ici ... stackoverflow.com/posts/42887253/revisions
notme
Merci JM, votre solution était la seule qui fonctionnait pour moi.
Ahmed J.Le
5

définissez le z-index .modal sur une valeur la plus élevée

Par exemple, .sidebarwrapper a un z-index de 1100, donc définissez le z-index de .modal sur 1101

.modal {
    z-index: 1101;
}
A Mohudum Kamil
la source
5

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

.modal-backdrop{
  z-index:0;
}
Développer l'extrait

avec le débogueur Google, peut examiner l'élément BACKDROP et modifier les attributs. Bonne chance.

Ckevyn Ovalle
la source
3

dans votre navbar-fixed-topbesoin navbar z-index = 1041 et aussi si vous utilisez bootstarp-combined.min.csségalement le changement .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

Mohsin
la source
3

Modifiez la position absolue en relative.

.modal-backdrop {
    position: relative;
    /* ... */
}
Aristeu Roriz
la source
1
il supprime le fond noir
HCarrasko
3

Vous pouvez également supprimer le z-index de .modal-backdrop. Le CSS résultant ressemblerait à ceci.

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }
Matthew Gallegos
la source
3

J'ai supprimé le fond modal.

.modal-backdrop {
    display:none;
}

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

CodeBriefly
la source
3

ce que je trouve c'est que:

dans bootstrap 3.3.0 ce n'est pas bien, mais quand dans bootstrap 3.3.5 c'est right.let's 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)
ttong
la source
3

Ajoutez celui-ci à vos pages. Ça marche pour moi.

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>
Takei
la source
3

J'ai été corrigé en ajoutant un style ci-dessous à la balise DIV

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

Et ajoutez un css personnalisé

.modal-backdrop {position: relative;}
RaymondLe
la source
3 
$('.modal').insertAfter($('body'));
user109764
la source
3

Pour moi, la solution la plus simple était de mettre mon modal dans un wrapper avec une position absolue et un index z supérieur à .modal-backdrop. Depuis le fond modal (au moins dans mon cas) a le z-index 1050:

.my-modal-wrapper {
  position: absolute;
  z-index: 1060;
}
<div class="my-modal-wrapper"></div>
Développer l'extrait

sivi911
la source
z-index a fonctionné pour moi. Merci beaucoup.
Asif Iqbal
2

Dans mon cas, j'avais un emballage avec les éléments suivants:

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

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

hsobhy
la source