로그인 모달 창 질문드립니다 login 모달창을 누르면 login 모달창이 아니라 회원가입창이 모달창으로 나옵니다ㅠㅠ

조회수 693회
{% load bootstrap5 %}
{% load socialaccount %}


<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
  <title>Mise en Scène</title>

<style>
            #modal {
              display:none;
              vertical-align: middle;
              position:relative;
              width:100%;
              height:100%;
              z-index:1;
            }
            #modal h2 {
              margin:0;   
            }

            #modal button {
              display:inline-block;
              width:100px;
              margin-left:calc(100% - 100px - 10px);
            }

            #modal .modal_content {
              width:300px;
              margin:auto;
              padding:20px 10px;
              background:rgba(0, 0, 0, 1);
              border:2px solid #666;
              position: absolute;
              transform: translate(-50%,);
              left: 50%;
              top: 10%;
            }

            #modal .modal_layer {
              position:fixed;
              top:0;
              left:100;
              width:100%;
              height:100%;
              background:rgba(0, 0, 0, 0);
              z-index:-1;
            }   
        </style>

</head>
<body style="background-color:#0F172A">
  <!-- CSS style 모음 파일 -->
  {% include '_style.html' %}

  <nav class="navbar justify-content-evenly py-2">
    {% if user.is_authenticated %}
      <ul class="d-flex flex-row align-items-center list-unstyled my-0">
        <li class="mx-2">
          <a href="{% url 'movies:index'%}" class="text-decoration-none text-light">Movie</a>
        </li>

        <li class="mx-2">
          <a href="{% url 'community:index'%}" class="text-decoration-none text-light">Community</a>
        </li>

        <li class="mx-2">
          <a href="{% url 'movies:mybox'%}" class="text-decoration-none text-light">My Box</a> 
        </li>

        <li class="mx-2">
          <input class="form-control" style="width: 200px" type="search" placeholder="Search" aria-label="Search">
        </li>
      </ul>

      <ul class="d-flex flex-row align-items-center list-unstyled my-0">          
        <li class="mx-2 dropdown">
          {% if user.image %}
            <a class="nav-link" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              <img class="profile_img" src="{{ user.image.url }}" alt="프로필 사진">
            </a>
          {% else %}
            <a class="nav-link" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
                <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
              </svg>
            </a>
          {% endif %}
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li>
              <a class="dropdown-item" href="{% url 'accounts:profile' request.user.username %}">
                <span class="btn btn-link text-decoration-none">계정</span>
              </a>
            </li>
            <li><hr class="dropdown-divider"></li>
            <li>
              <form class="dropdown-item" action="{% url 'accounts:logout' %}" method="POST">
                {% csrf_token %}
                <input class="btn btn-link text-decoration-none" type="submit" value="Logout">
              </form>
            </li>
          </ul>     
        </li>
      </ul>
    {% else %}
      <ul class="d-flex flex-row align-items-center list-unstyled my-0">
        <li class="mx-2">
          <a href="{% url 'accounts:signup' %}">Signup</a>
        </li>
        <!--
        <li class="mx-2">
          <a href="{% url 'accounts:login' %}">Login</a>
        </li>
        -->
        <li class="mx-2">
        <a type="button" id="modal_open_btn" >Login</a>
        </li>

      </ul>



<!-- Button trigger modal -->
<!--
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>



        <div id="modal">        
          <div class="modal_content">
              <div class="modal-body">
                {% load bootstrap5 %}
                {% load socialaccount %}

                <div class="Login" >
                  <form action="accounts/login/" method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    {% for field in form %}
                    {% bootstrap_field field %}
                    {% endfor %}    
                    <input type="submit">
                  </form>
                  <p>또는</p>
                  <a href="{% provider_login_url "google" next="/movies/" %}">Google 계정으로 계속하기</a>
                  <a href="{% provider_login_url "naver" next="/movies/" %}">NAVER 계정으로 계속하기</a>
                  <a href="{% provider_login_url "kakao" next="/movies/" %}">Kakao 계정으로 계속하기</a>

                </div>
              </div>

                <a type="button" id="modal_close_btn">닫기</a>
          </div>
        <div class="modal_layer"></div>
        </div>



    {% endif %}
  </nav> 
  <div class="container">

  </div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <!— Lodash CDN —>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js" integrity="sha256-qXBd/EfAdjOA2FGrGAG+b3YBn2tn5A6bhz+LSgYD96k=" crossorigin="anonymous"></script>
  <!— Vue CDN —>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  {% block script %}
  {% endblock %}
<script>
    document.getElementById("modal_open_btn").onclick = function() {
        document.getElementById("modal").style.display="block";
    }
    document.getElementById("modal_close_btn").onclick = function() {
        document.getElementById("modal").style.display="none";
    }   
</script>



{% block content %}
<div style="padding: 20px 300px;">
  <h1>회원가입</h1>
  <form action="" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    {% bootstrap_form form %}
    <input type="submit">
  </form>
  <a href="{% provider_login_url "google" next="/movies/" %}">Googl123123e 계정으로 계속하기</a>
  <a href="{% provider_login_url "naver" next="/movies/" %}">NAVER 계정으로 계속하기</a>
  <a href="{% provider_login_url "kakao" next="/movies/" %}">Kakao 계정으로 계속하기</a>

</div>
{% endblock  %}


</body>
</html>
  • 죄송한 말씀인데 부트스트랩 모달 자체를 완전히 잘못 이해하고 계신 거 같아요. style.display="block"을 직접 주시면 안됩니다. 문서 잘 읽고, 템플릿 의존 없는 생짜 html 파일 하나 만드셔서 아예 새로 다시 만들어봐 주세요. https://getbootstrap.com/docs/5.1/components/modal/ 엽토군 2021.11.24 14:54

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)