django页面添加弹窗

我的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">&times;</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>