时间戳

首页 > 解决方案 > LoginForm django 模式

python - LoginForm django 模式

问题描述

我尝试在我的标题上的弹出窗口（模式）上添加一个基于 django 的 LoginForm fonction 的登录表单。但它不起作用......我不知道我做错了什么......当我在 login.html 之类的页面上使用 LoginForm 时，我可以工作，但是当我在弹出页面上尝试时什么也没有。这是我的页面 popup.html 和我的页面网址。谢谢你

from django.urls import path
from django.contrib.auth import views as auth_views
from .forms import LoginForm
from . import views

app_name = 'account'
urlpatterns = [
    path('', auth_views.LoginView.as_view(template_name='shop/popup.html', redirect_authenticated_user=True, authentication_form=LoginForm), name='login'),
]
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <span class="close">&times;</span>
            <h2>Modal Header</h2>
        </div>
        <div class="modal-body">
            {{ form }}
{#            <form>#}
{#                <div class="form-group col">#}
{#                    <div class="col-xs-2">#}
{#                        <label for="Email">Email address</label>#}
{#                        <input type="email" class="form-control mb-6" id="Email"#}
{#                               aria-describedby="emailHelp"#}
{#                               placeholder="Enter email">#}
{#                    </div>#}
{#                    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone#}
{#                        else.</small>#}
{##}
{#                    <div class="col-xs-2">#}
{##}
{#                        <label for="exampleInputPassword1">Password</label>#}
{#                        <input type="password" class="form-control mb-6" id="exampleInputPassword1"#}
{#                               placeholder="Password">#}
{#                        <div class="col-xs-2">#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}
{#                <button type="submit" class="btn btn-primary">Submit</button>#}
{#            </form>#}
        </div>
        <div class="modal-footer">
            <h3>Modal Footer</h3>
        </div>
    </div>


    <script>
        // Get the modal
        var modal = document.getElementById("myModal");

        // Get the button that opens the modal
        var btn = document.getElementById("myBtn");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks on the button, open the modal
        btn.onclick = function () {
            modal.style.display = "block";
        }

        // When the user clicks on <span> (x), close the modal
        span.onclick = function () {
            modal.style.display = "none";
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }


    </script>

标签： pythonhtmldjangoauthenticationmodal-dialog

解决方案

看看支持模式的引导程序 v5。这是引导程序 5 模式的直接链接：https ://getbootstrap.com/docs/5.0/components/modal/

在使用任何引导程序之前，您必须在 HTML 页面的标题中包含以下标签

只需复制它们并粘贴到标题标签中，这里就是“之前要做什么”信息链接：https ://getbootstrap.com/docs/5.0/getting-started/introduction/

希望它变得有帮助。谢谢你

推荐阅读