La modale Bootstrap apparaît en arrière-plan

Question

La modale Bootstrap apparaît en arrière-plan

Demandé el 17 de Mai, 2012: Quand la question a-t-elle été
33687 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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

Voilà à quoi ça ressemble :

modal hiding behind backdrop

Voir ce violon pour un moyen 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;
}

Avez-vous une idée de la raison de ce phénomène ou de ce que je peux faire pour y remédier ?

Demandé el 17 de Mai, 2012 par natlines

0 votes

Au cas où quelqu'un d'autre chercherait pendant un certain temps des balises ouvertes, etc. pour essayer de comprendre pourquoi cela se produit, pour moi c'est l'extension chrome Feedly qui a cassé mes modales. La désactivation de l'extension a ramené le comportement à la normale.

Commenté el 10 de Septembre, 2014 par threeve

0 votes

Dans ce cas, le problème se situait sur iOS et était causé par overflow-x: hidden appliqué au conteneur de la modale.

Commenté el 17 de Juillet, 2015 par idmean

1 votes

Création de 3 exemples à travers 3 versions. La version 3.3.1 fonctionne bien, mais pas les autres. Version 3.3.1 jsfiddle Version 3.3.5 jsfiddle Version 3.3.6 jsfoddle

Commenté el 1 de Août, 2016 par Dimitry

Afficher 4 autres commentaires

Answer 1

5 Réponses

Answer 2

749voto

Muhd Points 2975

Ce comportement se produira si le conteneur modal a une position fixe ou relative ou s'il se trouve dans un élément ayant une position fixe ou relative.

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

Voici quelques façons de le faire :

Le plus simple est de déplacer le div modal de manière à ce qu'il se trouve en dehors de tout élément ayant un positionnement spécial. Un bon endroit pourrait être juste avant la balise de fermeture du corps de l'élément. </body> .
Alternativement, vous pouvez supprimer position: les propriétés CSS de la modale et de ses ancêtres jusqu'à ce que le problème disparaisse. Cela peut toutefois modifier l'aspect et le fonctionnement de la page.

Répondu el 3 de Août, 2012 par Muhd (2975 Points )

29 votes

Bien vu. Pour votre information, la position "relative" du parent cause également ce problème.

Commenté el 8 de Octobre, 2012 par Giang Nguyen

1 votes

Utilisation d'une barre latérale à position fixe. Le fait de l'extraire de cette division a fait l'affaire. Merci.

Commenté el 9 de Janvier, 2013 par Esteban

4 votes

@Muhd comment vous assurez-vous qu'il et tous ses éléments parents sont positionnés par défaut ?

Commenté el 8 de Mars, 2013 par indago

Afficher 17 autres commentaires

Answer 3

467voto

Adam Albright Points 865

Le problème est lié au positionnement des conteneurs parents. Vous pouvez facilement "déplacer" votre modale hors de ces conteneurs avant de l'afficher. Voici comment procéder si vous êtes show de votre modale en utilisant des js :

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

Ou, si vous lancez la modale à l'aide de boutons, laissez tomber l'option .modal('show'); et juste faire :

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

Cela conservera toutes les fonctionnalités normales, vous permettant d'afficher la modale à l'aide d'un bouton.

Répondu el 3 de Avril, 2013 par Adam Albright (865 Points )

20 votes

Utilisez ce gestionnaire d'événement générique pour que la solution de @leandrotk fonctionne pour toutes les modales que vous pouvez avoir dans une page. $('.modal-dialog').parent().on('show.bs.modal', function(e){ $(e.relatedTarget.attributes['data-target'].value).appendTo(‌'body'); })

Commenté el 30 de Mai, 2016 par Patrick M.

2 votes

@PatrickM. Incroyable ! Cela a fonctionné à merveille sur un vieux projet que je reprends et ils avaient des modales partout !

Commenté el 8 de Juin, 2016 par denislexic

7 votes

Cela fonctionne très bien lorsque vous ne pouvez pas vraiment corriger le positionnement CSS. Merci :)

Commenté el 12 de Septembre, 2016 par alexcasalboni

Afficher 11 autres commentaires

Answer 4

126voto

PieterVK Points 11

J'ai également rencontré ce problème et aucune des solutions n'a fonctionné pour moi jusqu'à ce que je me rende compte que je n'ai pas besoin d'une toile de fond. Vous pouvez facilement enlever 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 : le data-backdrop doit être défini comme suit false ( autres options : static ou true ).

Répondu el 30 de Octobre, 2014 par PieterVK (11 Points )

2 votes

C'est de loin la solution la plus simple, et elle fonctionne comme un charme !

Commenté el 5 de Avril, 2015 par learning_to_swim

0 votes

Brillant ! J'avais également besoin d'exiger bootstrap - je ne sais pas pourquoi toutes les autres fonctionnalités de Bootstrap fonctionnent bien, mais j'avais besoin d'exiger pour que la modale fonctionne.

Commenté el 24 de Avril, 2015 par steve klein

0 votes

Parfait ! !! j'ai lutté pendant un jour et vous m'avez sauvé un autre jour. Merci encore. +1 et merci

Commenté el 28 de Avril, 2015 par Bhaskara

Afficher 5 autres commentaires

Answer 5

68voto

Andrew Dyster Points 1156

J'ai réussi à le faire fonctionner en donnant une valeur z-index élevée à la fenêtre modale. APRÈS l'ouvrir. Par exemple :

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

Répondu el 12 de Décembre, 2012 par Andrew Dyster (1156 Points )

1 votes

Est-ce que ça marche (l'homme dit que ça marche), pourquoi tu votes contre ? Comme je regarde, il semble que oui.

Commenté el 15 de Mars, 2013 par Rolice

0 votes

Oui, quelqu'un peut-il expliquer pourquoi c'est une mauvaise réponse ? Est-ce que c'est juste parce que c'est un peu bidon ?

Commenté el 18 de Avril, 2013 par brandones

7 votes

Je ne comprends pas les votes négatifs. Oui, c'est un peu bricolé, mais les autres solutions n'ont pas fonctionné pour moi, alors j'ai pensé contribuer à ce projet pour les personnes qui n'ont pas peur d'utiliser des solutions "bricolées" pour faire fonctionner cette fichue chose.

Commenté el 28 de Avril, 2013 par Andrew Dyster

Afficher 6 autres commentaires

Answer 6

16voto

Rohan Points 1658

Avec un peu de 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 modale disparaît sous la toile de fond lors de l'utilisation d'une barre latérale fixe pour les détails.

Répondu el 15 de Janvier, 2014 par Rohan (1658 Points )

0 votes

C'était une solution parfaite pour un plugin Wordpress que je créais et pour lequel je ne pouvais pas contrôler les éléments parents sur les thèmes d'autres personnes.

Commenté el 27 de Octobre, 2014 par Mark Rummel

0 votes

La meilleure solution jusqu'à présent !

Commenté el 31 de Décembre, 2014 par digz6666

La modale Bootstrap apparaît en arrière-plan

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

La modale Bootstrap apparaît en arrière-plan

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: