Bootstrap Travail modal mais il ne s'affichera pas correctement

Question

J'ai vraiment besoin de votre aide. J'essaie d'utiliser le modal bootstrap. Il m'a fallu 3-4 h pour le faire fonctionner. Étant donné que j'utilise un template, il semble que le bootstrap javascript ait été réécrit. J'ai trouvé un moyen de le faire fonctionner.

Mais maintenant, le problème est le modèle est affiché sans le style du tout:

Avant:

Après:

J'ai vraiment besoin de votre aide, je suis coincé ici et je ne sais vraiment pas comment résoudre ça. Le bootstrap.css semble fonctionner pour toute la feuille, donc je ne sais pas si c'est le problème.

Voici comment j'appelle le modal:

<div class="modal-backdrop fade in" ></div> 
    <div class="modal hide fade in" id="myModal" style="display: none;"> 
     <div class="modal-header"> 
      <a class="close" href="#">×</a> 
      <h3>Modal Heading</h3> 
     </div> 
     <div class="modal-body"> 
      <p>One fine body…</p> 
     </div> 
     <div class="modal-footer"> 
      <a class="btn primary" href="#">Primary</a> 
      <a class="btn secondary" href="#">Secondary</a> 
     </div> 
</div> 

<div class="bs-docs-example" style="padding-bottom: 24px;"> 
     <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large" data-backdrop="static" >Launch demo modal</a> 
</div> 

Merci pour votre aide!

Answer 1

Check this out: http://jsfiddle.net/nAUSm/

<!--<div class="modal-backdrop fade in" ></div>--> 
    <div class="modal hide fade in" id="myModal" style="display: none;"> 
     <div class="modal-header"> 
      <a class="close" href="#">×</a> 
      <h3>Modal Heading</h3> 
     </div> 
     <div class="modal-body"> 
      <p>One fine body…</p> 
     </div> 
     <div class="modal-footer"> 
      <a class="btn primary" href="#">Primary</a> 
      <a class="btn secondary" href="#">Secondary</a> 
     </div> 
    </div> 

<div class="bs-docs-example" style="padding-bottom: 24px;"> 
     <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large" data-backdrop="static" >Launch demo modal</a> 
</div> 

je suis arrivé à travailler en commentant la première div. Je ne suis pas sûr de ce que c'était.

Edit: Le bouton de fermeture ne fonctionne pas non plus, donc je l'ai fixé ici: http://jsfiddle.net/nAUSm/1/

Answer 2

Je sais que cela est trop tard pour la réponse, mais au cas où quelqu'un d'autre à la recherche d'une solution,

La structure div standard du popup bootstrap est la suivante.

<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Modal title goes here</h4> 
      </div> 
      <div class="modal-body"> 
       Some text to popup 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

Dans ce cas, vous manqués "-dialogue modale" et les classes "modal contenu". Si nécessaire, remplacez le div id "myModal".

Espérons que cela aide.