javascript - Django 中的弹出 UserCreationForm

Question

我可以弹出Django的UserCreationForm吗？

我正在建立一个网站。当我单击注册页面时，需要显示弹出的注册页面。

现在我有一个注册页面和登录页面，它们正在工作，但我需要弹出它们。

我正在使用 Django 的usercreationform。

我也可以以这种形式添加 Bootstrap 和 CSS 吗？

from django.contrib.auth.forms import UserCreationForm

这是我尝试过的弹出代码 现在 div 显示在我的页面上而不是弹出窗口中

注册

<script src='{% static "js/grayscale.min.js" %}'></script>
      <script src='{% static "js/creative.min.js"%}'></script>
      <script type="text/javascript">
  var model= document.getElementById('abc');
  window.onclick= function(event){
    if (event.target==model) {
      model.style.display= "none";
    }
  }
      </script>  

<div id="abc">

    <div id="popupContact">
    {% block title %}

{% endblock %}
    {% block content %}

       <div class="login" style="background: grey">

         {% if messages %}
            <ul>
                {% for message in messages %}
                <li>{{ message }}</li>
                {% endfor %}
            </ul>
        {% endif %}

        <h1>Create account - Racernomics</h1>

         <form method="post" >
             {% csrf_token %}
             <table>
                {{ form.as_table }}
                 <tr>
                    <td></td>
                     <td><button type="submit">Register</button></td>
                </tr>
             </table>
         </form>
       {% endblock %}
</div>
    </div>

Answer 1

您可以根据需要自定义表单。

可以通过将 html-classes、id`s 等直接添加到 django 中的表单类中，然后使用 css 访问和修改它们来完成:

class SomeForm(forms.Form):
    some_field = forms.DateField(widget=forms.TextInput(attrs={'class': 'datepicker', 'placeholder': 'mm/dd/yy'}),
                           required=False)

或者您可以使用例如附加库来访问模板中的表单(我更喜欢这种方式，它有助于保持逻辑和前端彼此分离)。这样的库可以是小部件调整。

看看这个 article ，您可能会感兴趣。