Question Bootstrap modal apparaissant sous le fond


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

Voici à quoi ça ressemble:

modal hiding behind backdrop

Voir ce violon pour un façon de reproduire ce problème. La structure de base de ce code est comme ceci:

<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?


470
2018-05-17 13:27


origine


Réponses:


Si le conteneur modal a une position fixe ou relative ou se trouve dans un élément avec une position fixe ou relative, ce comportement 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 le faire:

  1. Le plus simple est de simplement déplacer le div modal pour qu'il soit en dehors des éléments avec un positionnement spécial. Un bon endroit pourrait être juste avant la balise de fermeture du corps </body>.
  2. Alternativement, vous pouvez supprimer position: Propriétés CSS du modal et de ses ancêtres jusqu'à ce que le problème disparaisse. Cela peut toutefois changer l'apparence et le fonctionnement de la page.

513
2017-08-03 03:09



Le problème a à voir avec le positionnement des conteneurs parents. Vous pouvez facilement "déplacer" votre modal de ces conteneurs avant de l'afficher. Voici comment le faire si vous étiez showen utilisant votre js:

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

Ou, si vous lancez modal en utilisant les boutons, déposez le .modal('show'); et juste faire:

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

Cela gardera toutes les fonctionnalités normales, vous permettant d'afficher le modal en utilisant un bouton.


306
2018-04-03 07:00



J'ai essayé toutes les options fournies ci-dessus mais je n'ai pas réussi à les utiliser.

Qu'est-ce qui a fonctionné? la définition de l'index z du .modal-backdrop à -1.

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

141
2017-11-14 01:07



Assurez-vous également que la version de BootStrap css et js est la même. Différentes versions peuvent également faire apparaître modale en arrière-plan:

Par exemple:

Mal:

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

140
2017-11-14 10:18



J'ai également rencontré ce problème et aucune des solutions n'a fonctionné pour moi jusqu'à ce que j'ai compris 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>

Remarque: la data-backdrop attribut doit être défini sur false (autres options: static ou true).


83
2017-10-30 11:07



Je l'ai eu pour travailler en donnant une haute valeur z-index à la fenêtre modale APRÈS l'ouvrir. Par exemple.:

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

52
2017-12-12 07:24



La solution fournie par @Muhd est la meilleure façon de le faire. Mais si vous êtes coincé dans une situation où le changement de 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 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 une image fictive 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 le dialogue comme prévu. Donc, pour y parvenir, vous devez ajouter du code de script Java. Voici un exemple de comment vous pouvez y parvenir.

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

24
2017-08-28 07:45



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


13
2018-01-15 01:15



Une autre façon d'aborder cela est de supprimer l'index z du .modal-backdrop dans bootstrap.css. Cela fera que le fond sera au même niveau que le reste de votre corps (il disparaîtra toujours) et que votre modal sera au top.

.modal-backdrop ressemble à ça

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

9
2017-11-26 01:41



Ajoutez simplement deux lignes de CSS:

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

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


9
2018-05-28 21:51