- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
总的来说,我对 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 »</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>
最佳答案
问题出在您的 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/
我正在我的 xamarin.forms 应用程序中实现扫描仪功能,为此我正在使用 iOS native AVCaptureSession。但我的问题是在扫描或捕获 session 处于事件状态并且设备
所以我目前正在为我的项目制作一个音乐应用程序,它允许用户创建自己的音乐播放列表。但是,当我单击显示媒体选择器按钮时,它只显示白屏,当包含媒体选择器的 View 是 Initial View Contr
当我尝试在模拟器中启动 AVD 时,会出现一个小窗口(见图片),5 秒后它说没有响应并一直保持这种状态直到我关闭它。 我在网上搜索并尝试了所有解决方案,但都没有成功 在 BIOS 中启用了虚拟化 已安
尝试使用以下命令从视频中提取特定帧(删除了文件的特定名称!: ffmpeg -i video.mp4 -vf "select-gte(n\,6956)"-vframes 10262 文件夹/帧%d.j
我怎么知道终端正在继续工作而不中断它? 我已经运行了以下 git 命令: clone git://ligo-vcs.phys.uwm.edu/lalsuite.gituote 一段时间后它似乎被卡住了
我对 WPF 中的数据网格有一个奇怪的问题。我正在为我的应用程序使用 MVVM 模式,并且我的 View 模型实现了 idataerrorinfo 接口(interface)。每当我在添加新行后在我的
我有这个 Excel 文件,当我输入数据时它卡住了。例如,我双击一个单元格,输入数据,然后按“输入”。它会卡住而不是进入下面的细胞。按几次“enter”不会解冻程序,唯一有效的是用鼠标选择另一个单元格
我有线程池的任务队列,每个任务都有卡住锁定其正在使用的所有资源的倾向。并且除非重新启动服务,否则这些无法释放。 ThreadPool 中有没有办法知道它的线程已经被卡住?我有一个使用超时的想法(虽然我
我制作了以下小程序来确定内存是否用于 freeze(X,Goal) 之类的目标回收时 X变得无法访问: %:- use_module(library(freeze)). % Ciao Prolog n
我有一个使用 swing 的简单 java 应用程序。然而,当我执行程序时,框架将会出现,但我无法单击任何地方,并且按钮仅在几秒钟后出现。我对 javas Swing 库非常陌生,所以我可能会丢失一些
我正在尝试创建一个简单的 TCP 客户端服务器应用程序接口(interface)用户可以在按下相应按钮时启动或停止服务器我创建了一个 StartServer 按钮,当用户按下按钮时它应该连接到服务
我正在尝试从 ftp 服务器下载文件,但在检索文件时卡住了。我正在使用 commons-net-3.6.jar 我注意到的事情 当我使用 ftpClient.enterRemotePassiveMod
我正在尝试编写一个函数,该函数将能够找到位于我系统上的可执行文件搜索路径中的任意可执行文件。我遇到了一些输入会导致 SearchPathW 的问题无限期地卡住,我不确定到底发生了什么。 std::op
我的 Nativescript 应用程序的许多页面中都有 RadSideDrawer。主应用程序组件有一个 page-router-outlet并且所有其他页面都通过导航加载到此组件中。带抽屉的页面包
我有一个最小的服务器,它等待客户端连接,然后他启动一个线程,将回复发送回客户端,问题是回复。 这是服务器的代码: int port = 1234; ServerSocket servSock =
我有一个使用 C# 的 WinForms 应用程序。我尝试从文件中读取一些数据并将其插入到数据表中。虽然此操作很忙,但我的表单卡住并且我无法移动它。有谁知道我该如何解决这个问题? 最佳答案 这可能是因
在我们学校最新的项目中,我遇到了一些问题。我想观察新条目的路径,该路径是由文件导向器按钮选择的,但如果我选择任何文件,整个窗口都会卡住...我猜它被卡住,因为调用了“observePath”方法,但我
当我输入一百万作为输入数字时,我的程序卡住了。我该如何解决这个问题? 我尝试将第二个 for 循环分离为第二个函数,但没有成功。 import java.io.*; public class Arra
早上好编译我的应用程序时,我在 Android Studio 上遇到问题。我在构建时没有收到关于 app:transformClassesWithDexBuilderForDebug 的任何输出错误,
我正在使用以下触发器 DELIMITER ; CREATE TRIGGER updateCount AFTER INSERT ON user_info FOR EACH ROW BEGIN UPDA
我是一名优秀的程序员,十分优秀!