我对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 »</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 »</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 »</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>
答案 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。