Modal не открывается с django

Question

У меня небольшая проблема с модальным в django.

У меня есть ссылка, которая вызывает идентификатор, а 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 %} 

Любые сомнения, пожалуйста, спрашивайте. Спасибо.

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

который я предполагаю, что вы уже имеете, потому что в противном случае все будет выглядят странно.

Answer 2

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

Вам нужен атрибут data-target в дополнение к вашему data-toggle. http://getbootstrap.com/javascript/#live-demo

Answer 3

попробуйте изменить тег "а" помечать "кнопка" в

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