弹出联系人或模态形式冻结，django + twitter bootstrap + bootsnipp

时间：2014-03-20 06:58:53

标签： html css django twitter-bootstrap

我对django和网络编程一般都很陌生。我想建立一个小型网站示例。我使用django allauth和twitter bootstrap。但是，我想构建一个弹出式登录，注册窗口，这是我在twitter bootsrap示例中找不到的。所以我从bootsnipp获取了一个片段，因为它完全符合我的要求：弹出其他形式，同时淡化它们，所以我想稍微调整它会对我有用。但是，如果我将代码放在主体或页脚内部，它就可以工作。如果我尝试将其添加到导航栏，由twitter bootstrap提供它只是冻结。有人可以帮帮忙吗？我完全不知道为什么会这样......

这是带有按钮和主体元素的接触按钮的工作代码（接触按钮2,3,4）。但是，当我尝试在注释＆＃34;联系按钮1＆＃34;之后添加以下代码时，它会显示弹出窗口并冻结：

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#contact" data-original-title>Contact</a>
        <div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contactLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="panel-title" id="contactLabel"><span
                                class="glyphicon glyphicon-info-sign"></span> Any questions? Feel free to contact
                            us.</h4>
                    </div>
                    <form action="#" method="post" accept-charset="utf-8">
                        <div class="modal-body" style="padding: 5px;">
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                                    <input class="form-control" name="firstname" placeholder="Firstname" type="text"
                                           required autofocus/>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                                    <input class="form-control" name="lastname" placeholder="Lastname" type="text"
                                           required/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                    <input class="form-control" name="email" placeholder="E-mail" type="text"
                                           required/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                    <input class="form-control" name="subject" placeholder="Subject" type="text"
                                           required/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <textarea style="resize:vertical;" class="form-control" placeholder="Message..."
                                              rows="6" name="comment" required></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer" style="margin-bottom:-14px;">
                            <input type="submit" class="btn btn-success" value="Send"/>
                            <!--<span class="glyphicon glyphicon-ok"></span>-->
                            <input type="reset" class="btn btn-danger" value="Clear"/>
                            <!--<span class="glyphicon glyphicon-remove"></span>-->
                            <button style="float: right;" type="button" class="btn btn-default btn-close"
                                    data-dismiss="modal">Close
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

原始base.html：

{% load url from future %}
{% load staticfiles %}

<!DOCTYPE html>
<html>
<head>
{% block headbootstrap %}
<style type="text/css">
    body {
        padding-top: 60px;
        padding-bottom: 40px;
    }
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Basic css -->
<link href="{{ STATIC_URL }}twitter_bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link href="{{ STATIC_URL }}accesss/footer.css" rel="stylesheet">
{% endblock %}
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %}
{% endblock %}
</head>
<body>
{% block header %}
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
  <div class="container">
    <div class="navbar-header">
        <!-- Mobile Nav Button -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <!-- END Mobile Nav Button -->
        <a class="navbar-brand" href="#">HUMAN</a>
    </div>
    <!-- Navigation Links -->
    <div class="collapse navbar-collapse">
        {% if request.user.is_authenticated %}
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Dashboard</a></li>
            <li><a href="#News">News</a></li>
            <li><a href="#Data">Data</a></li>
        </ul>
        {% else %}
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#News">News</a></li>
            <li><a href="#Feedback">Feedback</a></li>
            <li><a href="#howitworks">How it works</a></li>
        </ul>
        {% endif %}
        <!-- END Navigation Links -->

        <!-- Contact Button 1 -->

        <!-- I want to add a button here -->

        <!-- Login & Logout buttons -->
        <form class="navbar-form navbar-right" role="form" method="post" action="{% url 'account_login' %}">
            {% csrf_token %}
            {{ form.non_field_errors }}
            {% if request.user.is_authenticated %}
            <a class="btn btn-success" type="submit" href="/accounts/logout/">Logout</a>
            <!---       <img class="pull-right" src="{{ request.user.profile.profile_image_url }}"/> --->

            {% if request.user.first_name or request.user.last_name %}
            {{ request.user.first_name }} {{ request.user.last_name }}
            {% else %}
            {{ request.user.username }}
            {% endif %}
            {% if request.user.profile.account_verified %} (verified) {% else %} (unverified) {% endif %}

            {% else %}
            <a class="btn btn-success" type="submit" href="/accounts/login/">Login</a>
            {% endif %}
            {% if redirect_field_value %}
            <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
            {% endif %}
        </form>


    </div>
    <!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar -->
{% endblock %}

{% block content %}
{% if request.user.is_authenticated %}
{% else %}
<!-- Contact Button 2 -->
<div class="container">
<div class="row">
    <br/><br/><br/>

    <a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#contact" data-original-title>
        Contact
    </a>

    <div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contactLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="panel-title" id="contactLabel"><span class="glyphicon glyphicon-info-sign"></span>
                        Any questions? Feel free to contact us.</h4>
                </div>
                <form action="#" method="post" accept-charset="utf-8">
                    <div class="modal-body" style="padding: 5px;">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                                <input class="form-control" name="firstname" placeholder="Firstname" type="text"
                                       required autofocus/>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                                <input class="form-control" name="lastname" placeholder="Lastname" type="text"
                                       required/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                <input class="form-control" name="email" placeholder="E-mail" type="text" required/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                <input class="form-control" name="subject" placeholder="Subject" type="text"
                                       required/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <textarea style="resize:vertical;" class="form-control" placeholder="Message..."
                                          rows="6" name="comment" required></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer" style="margin-bottom:-14px;">
                        <input type="submit" class="btn btn-success" value="Send"/>
                        <!--<span class="glyphicon glyphicon-ok"></span>-->
                        <input type="reset" class="btn btn-danger" value="Clear"/>
                        <!--<span class="glyphicon glyphicon-remove"></span>-->
                        <button style="float: right;" type="button" class="btn btn-default btn-close"
                                data-dismiss="modal">Close
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
  </div>

</div>


<div class="container">

<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
    <h1>News</h1>

    <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It
        includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>

    <p>To see the difference between static and fixed top navbars, just scroll.</p>

    <p>
        <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
    </p>
</div>
</div>
<!-- /container -->

<div class="container">

<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
    <h1>Promote</h1>

    <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It
        includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>

    <p>To see the difference between static and fixed top navbars, just scroll.</p>

    <p>
        <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
    </p>
    <!-- Contact Button 3 -->
    <a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#contact" data-original-title>
        Contact
    </a>

    <div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contactLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="panel-title" id="contactLabel"><span class="glyphicon glyphicon-info-sign"></span>
                        Any questions? Feel free to contact us.</h4>
                </div>
                <form action="#" method="post" accept-charset="utf-8">
                    <div class="modal-body" style="padding: 5px;">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                                <input class="form-control" name="firstname" placeholder="Firstname" type="text"
                                       required autofocus/>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                                <input class="form-control" name="lastname" placeholder="Lastname" type="text"
                                       required/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                <input class="form-control" name="email" placeholder="E-mail" type="text" required/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                <input class="form-control" name="subject" placeholder="Subject" type="text"
                                       required/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <textarea style="resize:vertical;" class="form-control" placeholder="Message..."
                                          rows="6" name="comment" required></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer" style="margin-bottom:-14px;">
                        <input type="submit" class="btn btn-success" value="Send"/>
                        <!--<span class="glyphicon glyphicon-ok"></span>-->
                        <input type="reset" class="btn btn-danger" value="Clear"/>
                        <!--<span class="glyphicon glyphicon-remove"></span>-->
                        <button style="float: right;" type="button" class="btn btn-default btn-close"
                                data-dismiss="modal">Close
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
  </div>

</div>
<!-- /container -->
<div class="container">

<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
    <h1>Feedback</h1>

    <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It
        includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>

    <p>To see the difference between static and fixed top navbars, just scroll.</p>

    <p>
        <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
    </p>
</div>

</div>
<!-- /container -->
{% endif %}
</div>
{% endblock %}
{% block extra_body %}
{% endblock %}
{% block footer %}
<footer>
<!--Contact Button 4 -->
<div class="container">
    <div class="row">
        <br/><br/><br/>
        <a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#contact" data-original-title>
            Contact
        </a>

        <div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contactLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="panel-title" id="contactLabel"><span
                                class="glyphicon glyphicon-info-sign"></span> Any questions? Feel free to contact
                            us.</h4>
                    </div>
                    <form action="#" method="post" accept-charset="utf-8">
                        <div class="modal-body" style="padding: 5px;">
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                                    <input class="form-control" name="firstname" placeholder="Firstname" type="text"
                                           required autofocus/>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6" style="padding-bottom: 10px;">
                                    <input class="form-control" name="lastname" placeholder="Lastname" type="text"
                                           required/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                    <input class="form-control" name="email" placeholder="E-mail" type="text"
                                           required/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
                                    <input class="form-control" name="subject" placeholder="Subject" type="text"
                                           required/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <textarea style="resize:vertical;" class="form-control" placeholder="Message..."
                                              rows="6" name="comment" required></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer" style="margin-bottom:-14px;">
                            <input type="submit" class="btn btn-success" value="Send"/>
                            <!--<span class="glyphicon glyphicon-ok"></span>-->
                            <input type="reset" class="btn btn-danger" value="Clear"/>
                            <!--<span class="glyphicon glyphicon-remove"></span>-->
                            <button style="float: right;" type="button" class="btn btn-default btn-close"
                                    data-dismiss="modal">Close
                            </button>
                        </div>
                </div>
            </div>
        </div>
    </div>
</div>


</footer>
{% endblock %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/dist/js/bootstrap.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/affix.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/alert.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/modal.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/dropdown.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/scrollspy.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/tab.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/tooltip.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/popover.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/button.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/collapse.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/carousel.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/transition.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/test.js"></script>
<script src="{{ STATIC_URL }}accesss/test.js"></script>
<script src="{{ STATIC_URL }}footer/test.js"></script>

</body>
</html>

1 个答案:

答案 0 :(得分：0)

问题出在您的base模板中。您包括jquery.js两次，bootstrap.js两次，实际上三次因为您再次包含Bootstrap各个组件的所有单个脚本。

此外，如果您在开发服务器上运行此功能，则可能无法让Internet始终处于打开状态。所以，我没有看到使用 http：//ajax.goo ... 或其他jQuery在线资源的任何意义。 Bootstrap自jquery.js文件夹中已有/assets/js/，为什么不使用它？

你应该这样做：

<script src="{{ STATIC_URL }}twitter_bootstrap/assets/js/jquery.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/dist/js/bootstrap.js"></script>

<强>更新

为两个模态分配不同的id。

<!-- Sign in button -->
<a data-toggle="modal" data-target="#SignInModal" class="btn btn-primary" data original-title>Sign in</a>

<!-- Sign in modal -->
<div id="SignInModal"class="modal fade" tabindex="-1" role="dialog" aria-labelledby="signinLabel"aria-hidden="true" >
<!-- The code for sign in form -->
</div>

然后，如果您想在模板中使用联系人按钮，请为此创建另一个链接和模式：

<!-- Contact button -->
<a data-toggle="modal" data-target="#ContactModal" class="btn btn-primary" data original-title>Contact</a>

<!-- Contact Modal -->
<div id="ContactInModal"class="modal fade" tabindex="-1" role="dialog" aria-labelledby="contactLabel"aria-hidden="true" >
<!-- The code for contact form -->
</div>

确保您将两种模式设为不同id s。

相关问题
最新问题