web-dev-qa-db-fra.com

Le mode de bootstrap ne s'affiche pas

J'ai copié et collé l'exemple de code du bootstrap de Twitter pour créer une fenêtre modale de base dans mon application Rails 3.2:

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<a href= "#myModal"  role="button" class="btn" data-toggle="modal">Launch demo modal</a>

Ça ne fonctionne pas. Ce n'est pas parce que jQuery ou les scripts ne chargent pas car a) il n'a pas besoin de charger de js car il utilise le ciblage des données et b) j'ai vérifié la console et tout se déclenche parfaitement.

Ce n'est pas non plus parce que j'inclue à la fois boostrap.js et bootstrap-modal.js ... J'ai vérifié et je ne le suis pas.

Je suis à perte. Cela devrait juste marcher. Autre bootstrap js fonctionne bien sur le site.

La seule chose à laquelle je peux penser, c’est quelque chose à voir avec la définition des classes .hide et .fade - quand je les retire, le modal se présente bien. Quand je les inclut, ça ne se voit pas du tout.

JQuery UI pourrait-il interférer avec cela?

S'il vous plaît, demandez-moi d'autres informations dont vous pourriez avoir besoin pour m'aider ...

METTRE À JOUR:

Donc, je pense que je vois le problème, mais je ne sais pas comment le résoudre. Quand je vérifie la console, tout en haut, je vois que 

element.style {
display: none;
}

fait en quelque sorte maintenant partie de la division, donc dans la console cela ressemble à ceci:

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;" >

Mais je ne sais pas pourquoi il l’ajoute, ni d’où il vient. Comment puis-je retrouver cela?

Merci

twitter-bootstrapmodal-dialog
26
jfdimark

J'ai retrouvé la raison.

Juste pour lui donner une utilité générale à quiconque aborde cette question. Si vous ne pouvez pas comprendre ce qui ne va pas, essayez d'effectuer une recherche dans toutes les classes de fondu, de fondu, de masquage dans les feuilles de style de votre application.

Une seule instance de 'fade' a été définie dans un fichier CSS aléatoire, et c'est ce qui l'a empêchée de s'afficher car elle ignorait le bootstrap. Une fois que j'ai supprimé la référence, tout allait bien.

38
jfdimark

Si vous avez mis à niveau Bootstrap 2.3.2 vers Bootstrap 3, vous devrez alors supprimer la classe 'hide' de l'un de vos divs modal .;

47
paul

Changez votre code en quelque chose comme ça, 

<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<a class="btn" data-target="#myModel" role="button" data-toggle="modal">Launch demo modal</a>

et essayez d’utiliser data-target = "# ModelId" une fois. c'est peut-être la cause possible.

Deuxièmement, si vous avez inclus JQuery plusieurs fois, supprimez-le et incluez-le une seule fois. Cela empêche aussi parfois le modèle.

2
Kiran Maniya

Si vous utilisez angular et essayez de créer une directive comportant un modal personnalisé, le fond modal sera affiché, mais le modal lui-même ne le sera pas, sauf si vous définissez replace: true sur votre directive.

Directive TypeScript:

export class myModalDirective implements ng.IDirective {
    static Register = () => {
        angular.module('app').directive('myModal', () => { return new myModalDirective () });
    }
    templateUrl = 'mymodal.html'    
restrict = 'E';
    replace = true;
    scope = {
        show: '='
    }
    link = (scope: any, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: any) => {
        var vm = this;
        scope.$watch(function () { return scope.show; }, function (vis) {
            if (vis) {
                $(element).modal('show');
            } else {
                $(element).modal('hide');
            }
        });

    }
    constructor () {
    }
}

HTML modal

<div class="modal fade" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Modal Title</h4>
                </div>
                <div class="modal-body">
                </div>
        </div>
    </div>
</div>
1
John Dover

J'ai eu mon modal <div> dans mon <li> .... pas bon.

À l'extérieur fonctionne bien :-)

<div class="modal fade" id="confirm-logout" tabindex="-1" role="dialog" aria-labelledby="logoutLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">....</h4>
            </div>

            <div class="modal-body">
                <p>....</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a class="btn btn-danger btn-ok">OK</a>
            </div>
        </div>
    </div>
</div>
<li>
    .....
</li>
1
JanBorup

J'ai eu le même problème et j'ai réalisé que mon <button> avait un type="submit" quand Bootstrap indique qu'il doit être type="button" 

1
Paula

En tant que Paula, j'ai eu le même problème, mon modal n'était pas affiché et j'ai réalisé que mon bouton était dans une balise '<form>' ...

<button class="btn btn-danger" data-toggle="modal" data-target="#deleteItemModal">Delete</button>

Je viens de remplacer <button> par <a>, et mon modal a bien fonctionné

<a class="btn btn-danger" data-toggle="modal" data-target="#deleteItemModal">Delete</a>
0
Fox5150

Pour que mon modal s'affiche lors de l'appel de .modal ('show')

J'ai changé:

modal.on('loaded.bs.modal', function()

à:

modal.on('shown.bs.modal', function() {
0
Ben

Après avoir rencontré cela, j'ai été surpris de constater qu'aucune de ces solutions ne fonctionnait, car cela semble assez simple et j'avais des balises similaires travaillant sur une page différente.

Avec ma configuration, le code jQuery existant était lié au même sélecteur déclenchant le modal. Une fois le processus d'élimination lancé, tout ce que j'avais à faire était de commenter/supprimer e.stopPropagation() dans mon script existant.

0
EternalHour