我对django中的模态有点问题。
我有一个链接,它调用一个id,该id是一个模态。然而,模态没有打开。我很确定这是因为链接在一个"自动"表单中,但我是django和python的新手,所以我不知道。
代码为:
{% block body %}
<div class="col-lg-12 page-content">
<h1 class="content-title">Meus Dados</h1>
<hr class="star-light">
<div class="form-content">
<form class="form-horizontal" method = 'POST' action="/user/edituser/">
{% csrf_token %}
{% for field in form_user %}
{% bootstrap_field field exclude="password,repeat_password" %}
{% endfor %}
<div class="button-div">
<a class="btn btn-info btn-block btn-password" href="#change-password"
data-toggle="modal">Alterar senha</a>
{% buttons %}
<button class="btn btn-success btn-block btn-edit" type = 'submit'>Salvar Dados</button>
{% endbuttons %}
</div>
</form>
<a class="btn btn-danger btn-block btn-delete" href="/user/delete" name="delete">Excluir minha conta</a>
</div>
</div>
<div class="modal hide" id="change-password">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<p class="modal-title" id="myModalLabel">Change Password</p>
</div>
<div class="modal-body">
<div class="row">
<div class="modal-col col-sm-12">
<div class="well">
<form method="post" id="passwordForm">
<input type="password" class="input-lg form-control" name="password1"
id="password1" placeholder="New Password">
<input type="password" class="input-lg form-control" name="password2"
id="password2" placeholder="Repeat Password">
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-success btn-bloc">Alterar Senha</a>
</div>
</div>
{% endblock %}
有任何疑问,请询问。谢谢
将<a>
标记更改为以下内容:
<a class="btn btn-info btn-block btn-password" href="#"
data-toggle="modal" data-target="#change-password">Alterar senha</a>
至少我在Django模板中是这样做的。正如我认为@souldeux试图说的那样,您需要使用data-target
属性来指定模态本身,而不是href
;在这种情况下,我通常只使用#
。
此外,请确保您不仅加载引导css代码,还加载引导js库。换句话说,请确保您的模板中有以下内容(或等效内容(:
<!-- Latest compiled and minified JavaScript (at the time of this post) -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
除了你的css:
<!-- Latest compiled and minified CSS (at the time of this post) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
我想你已经有了,因为否则事情看起来会很奇怪。
<a class="btn btn-info btn-block btn-password" href="#change-password" data-toggle="modal">Alterar senha</a>
除了data-toggle
之外,还需要一个data-target
属性。http://getbootstrap.com/javascript/#live-演示
尝试将中的标签"a"更改为标签"button">
<a class="btn btn-info btn-block btn-password" href="#change-password"
data-toggle="modal">Alterar senha</a>
并在中隐藏以淡出
<div class="modal hide" id="change-password">