Как использовать модальное окно регистрации Bootstrap с django

98
02 мая 2021, 18:50

Я недавно в программировании, и у меня возник вопрос. Я нашел подходящую модалку в инете которую я скопировал и вставил но не знаю как привязать с django. Вот тот шаблон модалки

<!-- Modal -->
<div class="modal fade" id="elegantModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <!--Content-->
    <div class="modal-content form-elegant">
      <!--Header-->
      <div class="modal-header text-center">
        <h3 class="modal-title w-100 dark-grey-text font-weight-bold my-3" id="myModalLabel"><strong>Войти</strong></h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <!--Body-->
        <form type="post" action="{% url 'common:login' %}">
      <div class="modal-body mx-4">
        <!--Body-->
        <div class="md-form mb-5">
          <input type="email" name="useremail" id="Form-email1" class="form-control validate">
          <label data-error="wrong" data-success="right" for="Form-email1">Ваша почта</label>
        </div>
        <div class="md-form pb-3">
          <input type="password" id="Form-pass1" class="form-control validate">
          <label data-error="wrong" data-success="right" for="Form-pass1">Пароль</label>
          <p class="font-small blue-text d-flex justify-content-end">Забыли <a href="#" class="blue-text ml-1">
              пароль?</a></p>
        </div>
        <div class="text-center mb-3">
          <button type="button" class="btn blue-gradient btn-block btn-rounded z-depth-1a">ок</button>
        </div>
        <p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> или войти
          с помощью:</p>
        <div class="row my-3 d-flex justify-content-center">
          <!--Facebook-->
          <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fab fa-facebook-f text-center"></i></button>
          <!--Twitter-->
          <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fab fa-twitter"></i></button>
          <!--Google +-->
          <button type="button" class="btn btn-white btn-rounded z-depth-1a"><i class="fab fa-google-plus-g"></i></button>
        </div>
      </div>
            </form>
      <!--Footer-->
      <div class="modal-footer mx-5 pt-3 mb-1">
        <p class="font-small grey-text d-flex justify-content-end">Первый раз? <a href="{% url 'common:signup' %}" class="blue-text ml-1">
            Зарегистрируйся</a></p>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>
<!-- Modal -->

а это моя вьюшка до использования модалки

def signup(request):
    if request.method == 'POST':
        form = UserCreationForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('index')
    else:
        form = UserCreationForm()
    return render(request, 'registration/signup.html', {'form': form})

С модалкой все ж симпатичнее поэтому хотелось б знать как эти вещи сочетаются

READ ALSO
Не работает стиль (CSS) на моем сайте

Не работает стиль (CSS) на моем сайте

Я пишу проект и хочу добавить стиль чтобы все было ровно (шаблон меню) но почему то он не читает CSS файл и папку images Остальные стили читает кроме...

92
Временная память в Unity

Временная память в Unity

Делаю карточную игру где выкладывается на игровую зону карты, но также их нужно забирать если ошибся, как сделать чтобы при выкладывании...

98
Почему координата фиксируется

Почему координата фиксируется

У меня есть корабль который должен постоянно находиться на координатах (x, y, -3) чтобы летать перед фоном и другими объектами, у меня есть Canvas...

98