我的django页面有一个登录按钮,我希望在登录状态下,再次点击登录按钮,会弹窗提示,模态框实现方法如下:
1.模态框代码
<!-- 模态框 -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="loginModalLabel">已登录</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
已登录
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
2.判断是否登录,如果已登录则弹窗
{
% if user.is_authenticated %}
<!-- 如果已登录,则显示一个模态框 -->
<script>
// 在页面加载后运行这个代码块
window.onload = function() {
// 选中登录按钮
const loginButton = document.querySelector('a[href="{% url 'login' %}"]');
// 给登录按钮添加一个点击事件监听器
loginButton.addEventListener('click', function(event) {
// 阻止默认行为(即打开登录页面)
event.preventDefault();
// 显示模态框
$('#loginModal').modal('show');
});
};
</script>
{
% endif %}
3.添加必要的JavaScript文件以使模态框正常工作
<!-- 加载 jQuery 库 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- 加载 Bootstrap JavaScript 库 -->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>