模态不使用 django 打开答案

【问题标题】：Modal doesn't open with django模态不使用 django 打开
【发布时间】：2016-09-16 14:17:10
【问题描述】：

我在 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">&times;</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 %}

有任何疑问，请追问。谢谢。

【问题讨论】：

标签： django bootstrap-modal django-bootstrap3

【解决方案1】：

将您的 <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">

我假设你已经有了，否则事情会看起来很奇怪。

【讨论】：

@ElaineCristinaMeirelles 您是否在浏览器中看到任何错误（例如，在开发人员控制台中？）？此外，请确保除了 bootstrap css 代码之外还加载了 bootstrap js 代码。
天哪，我没有加载引导 js 代码，谢谢一百万。
@ElaineCristinaMeirelles 没问题。很高兴它奏效了！我也遇到过类似的事情。

【解决方案2】：

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

【讨论】：

Continuou não funcionando :/
Desculpe, eu só falo inglês。查看“启动演示模式”按钮的代码 - 尝试删除您的 href 属性并确保数据目标与您的模式的 id 匹配，就像在示例中所做的那样。请在此处发布您的尝试。

【解决方案3】：

尝试将标签“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">

【讨论】：