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

Posted 2023-02-24

【中文标题】Django 应用程序无法正确加载 Twitter bootstrap 3 模式

【英文标题】：Django application does not properly load Twitter bootstrap 3 modal

【发布时间】：2013-08-12 13:05:42

【问题描述】：

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

当我使用我的外部模板（不包含在 Django 中）测试简单模式时。我的 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>

正确的结果 见下图

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

见下图

会有什么问题

【问题讨论】：

django返回的html代码是否正确？ “错误”页面的源代码是什么？

我为打开模式所做的点击错误为 304

感谢 eran 的回复，但我通过在 ul 标记之外定义模态代码解决了这个问题，我将模态代码放在正文标记开始之后，它对我有用。

现在修复这个问题后，我在同一个导航栏上的下拉菜单不起作用，当我恢复更改时，下拉菜单仍然不起作用，而在我的 Django 应用程序之外，模式和下拉菜单都可以正常工作。

通过从我的 header.html 底部删除一行来修复下拉菜单问题 现在下拉菜单开始正常工作了。

【参考方案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->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 -->

这已经解决了我的问题。