L'application Django ne charge pas correctement Twitter bootstrap 3 modal

Question

Je crée une application Django et utilise le modèle de carrousel bootstrap Twitter pour créer mon site. Je prévois de fournir la fonctionnalité d'inscription et de connexion aux utilisateurs via Twitter boostrap 3 modal. Et Quand je teste modal simple avec mes modèles externes (non inclus dans Django). Mon Modal fonctionne bien.

Voici mon code Modal

<ul class="nav navbar-nav pull-right"> 
    <!-- calling sign up modal --> 
      <li><a data-toggle="modal" href="#signup"><b>Sign Up</b></a></li> 
      <!-- calling sign up modal finished --> 
       <!-- sign up modal --> 
       <!-- Modal --> 
       <div class="modal fade" id="signup"> 
       <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">Modal title</h4> 
        </div> 
        <div class="modal-body"> 
        ... 
        </div> 
        <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Save changes</button> 
        </div> 
        </div><!-- /.modal-content --> 
       </div><!-- /.modal-dialog --> 
       </div><!-- /.modal --> 
      <!-- sign up modal finish --> 
</ul> 

résultats corrects Voir image ci-dessous

Mais quand je lance ce modales à partir de modèles d'application Django. les charges modales mais un écran gris transparent se charge également dessus et cela rend toute la page désactivée.

Voir image ci-dessous

Quel serait le problème

Answer 1

Je résolu cette question en définissant mon code modal en dehors des balises ul, je mets mon code modal juste après le début de la balise body et il a travaillé pour moi.

C'est mon code

<!-- Modal 1 --> 
       <!-- define the sign up modal finished --> 
        <!-- sign up modal --> 
        <!-- Modal --> 
        <div class="modal fade" id="signup"> 
        <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">TrackLeech Sign Up</h4> 
         </div> 
         <div class="modal-body"> 

          <form class="navbar-form form-inline" align="left"> 
           <input type="text" placeholder="username" class="form-control" style="width: 200px;"> 
           <!-- Fb Login --> <div class="fb-login-button pull-right" data-width="400">Login with Facebook</div><!-- Add FB Button Here --> <br><br> 
           <input type="text" placeholder="email" class="form-control" style="width: 200px;"> <!-- Add Google Button Here --> <br><br> 
           <input type="password" placeholder="password" class="form-control" style="width: 200px;"> <!-- Add Twitter Button Here --><br><br> 
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
           <button type="button" class="btn btn-primary">Sign Up</button><br><br> 
           <a data-toggle="modal" data-dismiss="modal" href="#signin" >Already a member ? Sign In</a> 
          </form> 
          <div class="pull-right"> 


          </div> 
         </div> 
         <div class="modal-footer"> 
         <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         <button type="button" class="btn btn-primary">Sign Up</button> 
         <a data-toggle="modal" href="#signin" >Already a member ? Sign In</a> --> 
         </div> 
         </div><!-- /.modal-content --> 
        </div><!-- /.modal-dialog --> 
        </div><!-- /.modal --> 
       <!-- sign up modal finish --> 

Cela a résolu mon problème maintenant.