Twitter Bootstrap - pourquoi mon modal comme fanée que l'arrière-plan?

Donc je suis en utilisant Twitter Bootstrap et j'ai un modal qui glisse vers le bas lorsque l'utilisateur clique sur le bouton "Enregistrer".

Le seul problème est que, non seulement la page d'arrière-plan s'estomper, ce qui est un bel effet, mais le modal est également estompée. Comment puis-je obtenir de sorte que le modal est une luminosité normale alors que le fond est fanée?

J'ai créé un JSFiddle pour démontrer mon problème ici: http://jsfiddle.net/jononomo/7z8RZ/7/

Le code suivant crée un fondu modal:

<div class="navbar navbar-fixed-top"> 
    <a href="#registration_modal" data-toggle="modal">
        Register
    </a>
    <div id="registration_modal" class="modal hide fade">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
                <h3 id="myModalLabel">Register An Account</h3>
        </div>

        <div class="modal-body">
            Registration form goes here.
        </div>

        <div class="modal-footer">
            <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            <button class="btn btn-primary">Register</button>
        </div>

    </div>
</div>

Note: si je supprime le div extérieure, alors tout fonctionne bien. Donc, le problème est que le code pour le modal est dans les lignes suivantes:

<div class="navbar navbar-fixed-top">
</div>

Bien sûr, je ne veux pas supprimer la div, car je veux que le bouton le lien qui lance le modal pour être dans la barre de navigation qui est fixé à la partie supérieure de l'écran.

Modifier: j'ai rétréci vers le bas sur le fait que la div extérieure est de la classe navbar-fixed-top. Quand j'ai supprimer cette balise, tout fonctionne comme prévu, vous pouvez voir qu'il fonctionne correctement ici: http://jsfiddle.net/jononomo/7z8RZ/8/ bien sûr, je tiens la barre de navigation pour être fixé sur le dessus, de sorte que cela ne résout pas mon problème.

  • Pourquoi le downvote?
  • Mon JSFiddle exemple ne fonctionnait pas avant que j'ai édité, je me suis donc downvoted.
  • Regardez cette mise à jour de votre violon: jsfiddle.net/7z8RZ/10
InformationsquelleAutor jononomo | 2012-11-13
  1. 24

    Vérifier ce problème sur le Bootstrap dépôt git.

    Puis, essayez de mettre le modal avant la barre de navigation, comme ce violon.

    <div id="registration_modal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Register An Account</h3>
    </div>

    <div class="modal-body">
        Registration form goes here.
    </div>

    <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button class="btn btn-primary">Register</button>
    </div>

</div>
<div class="navbar navbar-fixed-top"> 
    <a href="#registration_modal" data-toggle="modal">
        Register
    </a>    
</div>

    • Merci, vous avez identifié le problème correctement.
    • Ce qui est totalement impossible dans mon cas. Comment cela pourrait-il être fait sans le faire?
    • Le modal peut aussi apparaître après la barre de navigation. L'essentiel à comprendre, c'est que le lien vers le modal peut faire son nid sous la barre de navigation, mais le nodal n'est pas un enfant de la barre de navigation.
    InformationsquelleAutor crowjonah
  2. 5

    Malheureusement, la réponse ne m'aide pas.. mais heureusement que cette discussion a le même problème et ils ont une réponse utile qui a fonctionné pour moi. Fondamentalement, vous devez assurez-vous que le modal est pas hériter de tout bizarre de positionnement des éléments de parent divs:

    Bootstrap modal apparaissant sous arrière-plan

    InformationsquelleAutor janeeats
  3. -1

    La façon que j'ai trouvé était en enveloppant le tout dans le modal à l'intérieur d'un <div class="modal-content"> tag. Ça ressemblait à quelque chose comme ceci:

    <div class="modal fade" id="TestModal">
    <div class="modal-content">
        <div class="modal-header">
            Modal header here
        </div>
        <div class="modal-body">
            <p>Modal content here</p>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

    Sans modal-content div, le modal a fini par être tout aussi gris que l'arrière-plan.

    • Cela ne semble pas résoudre le problème.
    • J'ai fait un peu plus de recherche sur ce sujet et apparemment, le modal fonctionnalité a quelques exemples de questions en fonction de la combinaison de JQuery et Bootstrap est utilisé. J'utilise JQuery 1.10.2 et Bootstrap 3.3.2 et il fonctionne très bien.
    InformationsquelleAutor