[JS] 회원가입,로그인 모달창에서 하기

 
 
스크립트

<script>
	window.onload = function(){
        /* 회원가입,로그인 페이지 띄우는 모달 */
     	// 모달 띄우기 버튼
        $(".userHeader a").click(function() {
            $("#user_modal").fadeIn(); // 모달 창 보이게 하기
            var clickedId = $(this).attr('id');
            if (clickedId === "join") {
                $("#user_modalBody").html("<h2>회원가입</h2>"); // 회원가입 텍스트 넣기
            } else if (clickedId === "login") {
                $("#user_modalBody").html("<h2>로그인</h2>"); // 로그인 텍스트 넣기
            }
        });
        
        $(window).click(function(event) {
            if ($(event.target).is("#user_modal")) {
                $("#user_modal").fadeOut(); // 모달 창 숨기기
            }
        });
	}
</script>

 
 
 
html

<header>
    <div class="userHeader">
        <a href="#" id="join">회원가입</a> | 
        <a href="#" id="login">로그인</a>
    </div>
</header>
<section></section>
<!-- 회원가입,로그인 모달창 -->
<div id="user_modal" style="display:none;">
    <div class="user_modal-content">
        <div id="user_modalBody">
            <!-- 회원가입,로그인페이지 여기에 표시됨 -->
        </div>
    </div>
</div>

 
 
css

/* 회원가입,로그인 모달 스타일 */
#user_modal {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 배경 어두운 색상 */
    overflow: auto;
    padding-top: 60px;
}

.user_modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    border: none;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    width: 40%; /* 창 크기 조절 */
    height: 60%;
    border-radius: 20px;
}

body.dark-mode .user_modal-content {
    background-color: #333333;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

 
 
라이트모드

 
 

 
 
다크모드

 

---

설명

$(".userHeader a").click(function() {
    $("#user_modal").fadeIn(); // 모달 창 보이게 하기
    var clickedId = $(this).attr('id');
    if (clickedId === "join") {
        $("#user_modalBody").html("<h2>회원가입</h2>"); // 회원가입 텍스트 넣기
    } else if (clickedId === "login") {
        $("#user_modalBody").html("<h2>로그인</h2>"); // 로그인 텍스트 넣기
    }
});

 

• $(".userHeader a").click(): userHeader 내에 있는 링크(회원가입, 로그인)를 클릭할 때 실행되는 이벤트입니다.
• $("#user_modal").fadeIn(): 모달 창을 서서히 나타나게 합니다.
• clickedId 변수: 클릭한 링크의 id 속성을 가져와서 join이면 "회원가입", login이면 "로그인"이라는 텍스트를 모달창 안에 삽입합니다.

 
 

$(window).click(function(event) {
    if ($(event.target).is("#user_modal")) {
        $("#user_modal").fadeOut(); // 모달 창 숨기기
    }
});

 

• $(window).click(): 사용자가 페이지 내 어디를 클릭했는지 감지합니다.
• if ($(event.target).is("#user_modal")): 만약 사용자가 클릭한 위치가 모달창의 영역(id="user_modal")이 아닌 곳이라면, 모달창이 fadeOut()으로 서서히 사라집니다.

 

<header>
    <div class="userHeader">
        <a href="#" id="join">회원가입</a> | 
        <a href="#" id="login">로그인</a>
    </div>
</header>
<section></section>
<!-- 회원가입, 로그인 모달창 -->
<div id="user_modal" style="display:none;">
    <div class="user_modal-content">
        <div id="user_modalBody">
            <!-- 회원가입, 로그인 페이지가 여기에 표시됨 -->
        </div>
    </div>
</div>

 
 

• userHeader: 페이지 상단의 회원가입 및 로그인 링크입니다. id="join"과 id="login" 속성을 이용해 각각의 모달 내용을 구분합니다.
• #user_modal: 모달창을 감싸는 div로, 기본적으로 display: none;으로 설정되어 있어 보이지 않다가, 사용자가 회원가입이나 로그인 링크를 클릭하면 나타납니다.
• user_modal-content: 모달창의 실제 콘텐츠가 들어갈 영역입니다.
• user_modalBody: 회원가입 또는 로그인 텍스트가 동적으로 들어갈 부분입니다.
• <a href="#"> : a 태그 href를 #으로 줘서 이동을 방지합니다.  

※ 추가설명
href="#"는 페이지의 맨 위로 스크롤되게 만들지만, 페이지 이동을 유발하지 않으므로 링크 클릭 시 실제로 다른 페이지로 이동하지 않도록 할 때 사용됩니다.   
만약 아무런 동작도 원하지 않는다면, 추가적으로 JavaScript를 사용해 이벤트를 방지할 수도 있습니다. 

<a href="#" onclick="event.preventDefault();">링크</a>

 
 

#user_modal {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 반투명한 검정색 배경 */
    overflow: auto;
    padding-top: 60px;
}

.user_modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    border: none;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    width: 40%; /* 모달 창 너비 */
    height: 60%; /* 모달 창 높이 */
    border-radius: 20px;
}

body.dark-mode .user_modal-content {
    background-color: #333333;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

 
 

• #user_modal: 화면 전체를 덮는 고정된 모달 배경입니다. background-color: rgba(0, 0, 0, 0.4)로 어두운 반투명 배경이 적용됩니다. 모달은 화면 중앙에 위치하며, 상단에 60px의 여백이 있습니다.
• .user_modal-content: 모달창의 실제 콘텐츠가 표시되는 부분으로, 흰색 배경과 그림자 효과를 적용하여 입체적으로 보입니다. 또한, 20px의 둥근 테두리가 있습니다.
• body.dark-mode .user_modal-content: 다크 모드일 때 모달창의 배경색이 어두운 색(#333333)으로 변경됩니다.