gpt4 book ai didi

html - 弹出联系人或模态表单卡住,django + twitter bootstrap + bootsnipp

转载 作者:行者123 更新时间:2023-11-28 10:59:00 25 4
gpt4 key购买 nike

总的来说,我对 Django 和 Web 编程还很陌生。我想建立一个小型网站示例。我使用 django allauth 和 twitter bootstrap。但是,我想构建一个弹出登录、注册窗口,我在 twitter bootsrap 示例中找不到。所以我从bootsnipp中摘录了一个片段,因为它完全按照我的意愿工作:在其他表单上弹出窗口,同时淡化它们,所以我认为稍微调整一下它就会为我工作。但是,如果我将代码放在正文或页脚中,它就可以工作。如果我尝试将它添加到由 twitter bootstrap 提供的导航栏,它就会卡住。有人可以帮忙吗?我完全不知道为什么会这样......

这是工作代码,其中联系按钮被放置在页脚和正文元素中(联系按钮 2、3、4)。但是,当我尝试将以下代码放在评论“Contact Button 1”之后时,它会显示弹出窗口并卡住:

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

最佳答案

问题出在您的 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

关于html - 弹出联系人或模态表单卡住,django + twitter bootstrap + bootsnipp,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22525680/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com