Question

我正在制作一个Django应用程序并使用Twitter bootstrap carousel模板制作我的网站。我计划通过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>

正确的结果见下图

enter image description here

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

见下面 enter image description here

的图片

会出现什么问题

Answer 1

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

这是我的代码

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

这已经解决了我的问题。

Django应用程序没有正确加载Twitter bootstrap 3模式

1 个答案: