Modal ne pas basculer sur

Question

J'ai créé un projet contenant 3 modal 'contact', 'log in' et register '. À un moment donné, ils fonctionnaient correctement. J'ai vérifié les éléments suivants: bootstrap.css, bootstrap.js et liens jQuery. Les liens jQuery et JS sont situés en bas du code HTML et avant le tag. Tous les liens avaient l'air OK. J'ai essayé de corriger cette condition pendant plusieurs heures avant de poster cette question. Il semble que les liens jQuery ou .js ne sont pas liés, mais comme je l'ai dit, ils ont l'air bien.

Une autre chose importante est que la date modale est affichée en bas à gauche et sous le conteneur de la page.

Désolé je ne peux pas poster des images cependant, je suis informé que j'ai besoin d'une réputation d'au moins 10 pour poster des images. Je viens de rejoindre récemment.

Je sais qu'il est difficile de résoudre les problèmes lorsque toutes les informations ne sont pas là, s'il vous plaît quelqu'un peut-il vous aider. Je suis sûr que c'est quelque chose de simple que

Answer 1

Voici mon truc pour gérer les modaux comme la même chose m'est arrivée. Supprimez d'abord l'id par défaut "= myModal" de l'exemple de bootstrap et utilisez une classe comme suit: Pour 3 modaux, vous utiliserez 3 fois. Ma pensée est que vous pourriez avoir des identifiants en conflit d'où votre code se brise. Vous pouvez voir un exemple de plusieurs modaux utilisés en utilisant ce modèle à this example

<div class="modal fade modal1" tabindex="-1" role="dialog" aria- 
    labelledby="myModalLabel" aria-hidden="true"> 

    //rest of modal code 

    </div> 

    <button type="button" data-toggle="modal" data-target=".modal1"> 

    <div class="modal fade modal2" tabindex="-1" role="dialog" aria- 
    labelledby="myModalLabel" aria-hidden="true"> 

    //rest of modal code 

    </div> 

    <button type="button" data-toggle="modal" data-target=".modal2"> 

    <div class="modal fade modal3" tabindex="-1" role="dialog" aria- 
    labelledby="myModalLabel" aria-hidden="true"> 

//rest of modal code 

</div>