편집 기록

편집 기록
  • 프로필엽토군님의 편집
    날짜2021.11.24

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


    {% 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>
    
  • 프로필chaeryun님의 편집
    날짜2021.11.24

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


    {% load bootstrap5 %} {% load socialaccount %}

    <!DOCTYPE html>

    Mise en Scène

    #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>
    

    <!-- CSS style 모음 파일 --> {% include '_style.html' %}

    {% if user.is_authenticated %} Movie

        <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 --> <!-- Launch static backdrop modal

    <!-- Modal --> Modal title ... Close Understood

        <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 %}
    

    <!— Lodash CDN —> <!— Vue CDN —> {% block script %} {% endblock %} 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"; }

    {% block content %} 회원가입 {% csrf_token %} {% bootstrap_form form %} Googl123123e 계정으로 계속하기 NAVER 계정으로 계속하기 Kakao 계정으로 계속하기

    {% endblock %}

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.