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?


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.

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.


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;
}

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>

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).


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

Ç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');
});

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.


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;
}

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.


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

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;
}

Mon problème était aussi le z-index.
James Lock


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.


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>

+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);
}); 

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.


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.


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;
}

5

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

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

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


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


3

Modifiez la position absolue en relative.

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

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

3

J'ai supprimé le fond modal.

.modal-backdrop {
    display:none;
}

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


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)

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>

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;}


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>


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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.