[Django]-Modal doesn't open with django

by

3👍

✅

Change your <a> tag to the following:

<a class="btn btn-info btn-block btn-password" href="#"
    data-toggle="modal" data-target="#change-password">Alterar senha</a>

At least this is how I do it in my Django templates. As I think @souldeux was trying to say, you need to use the data-target attribute to specify the modal itself, rather than the href; I usually just use # for that in cases like this.

Also, make sure that you are not only loading the bootstrap css code, but also the bootstrap js libraries. In other words, make sure you have the following (or some equivalent) in your template:

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

In addition to your 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">

Which I assume you already have, because otherwise things would look weird.

👤elethan

0👍

<a class="btn btn-info btn-block btn-password" href="#change-password" data-toggle="modal">Alterar senha</a>

You need a data-target attribute in addition to your data-toggle. http://getbootstrap.com/javascript/#live-demo

👤souldeux

0👍

try changing the tag “a” to tag “button” in

<a class="btn btn-info btn-block btn-password" href="#change-password"
                    data-toggle="modal">Alterar senha</a>

and hide to fade in

<div class="modal hide" id="change-password">
👤LGama

Leave a comment