django - Django 应用程序无法正确加载 Twitter bootstrap 3 模式

Question

我正在制作一个 Django 应用程序并使用 Twitter 引导轮播模板来制作我的网站。我计划通过 Twitter boostrap 3 模式向用户提供注册和登录功能。

当我使用我的外部模板（不包含在 Django 中）测试模态简单时。我的模态运行良好。

这是我的模态代码

<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>

正确结果见下图

但是当我从 Django 应用程序模板运行这个模式时。模态加载，但一个灰色的透明屏幕也加载在它上面，它使整个页面被禁用。

见下图

会有什么问题

Answer 1

我通过在 ul 标签之外定义我的模态代码解决了这个问题，我把我的模态代码放在正文标签的开始之后，它对我有用。

这是我的代码

<!-- 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 -->

这已经解决了我现在的问题。