<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<style>
/* 로그인창 */
.icon {
padding-left:10px;
display:block;
margin-left:auto;
margin-right:auto;
}
.loginbox {
width=300;
padding-left: 10;
padding-right: 10;
line-height:20px;
}
.naverbt {
background-color: #27D34A;
font-weight: bold;
font-size:13px;
color: white;
height:29px;
}
.kakaobt {
background-color: #FEE500;
font-weight: bold;
font-size:13px;
color: white;
}
a {
text-decoration-line: none;
font-size:13px;
}
.m_id {
width:300px;
height: 20px;
}
.m_pass {
width:300px;
height: 20px;
}
.loginbt { /* 로그인 버튼(빨) */
background-color: #A11F24;
color:white ;
border: 0px;
height: 30px;
font-weight: bold;
width: 300px;
padding-top:10px;
padding-bottom:30px;
align:center;
}
.checkbt { /* 비회원조회 */
background-color: #A11F24;
color:white ;
border: 0px;
height: 30px;
font-size:13px;
font-weight: bold;
width: 300px;
padding-top:10px;
padding-bottom:30px;
align:center;
}
/* 모달창 */
.modal_login { /*모달창*/
width: 100%;
height: 100%; /*높이 설정안하면 수직 가운데정렬 안됨*/
position: absolute; /*창 독립*/
left: 0;
top: 0;
display: none; /*flex하면 고정됨*/
flex-direction: column;
align-items: center;
justify-content: center;
}
.content_login { /*내용(로그인창)*/
width: 380px;
height: 520px;
position: relative;
background-color: #F1F1F1;
padding-top:20px;
}
.close_login { /*닫기버튼*/
float:left;
display: inline;
cursor: pointer;
text-shadow: 2px 2px 2px gray;
color: white;
}
</style>
<!--모달창 시작-->
<table id="modal_login" class="modal_login">
<tr>
<td align=center>
<div class="content_login">
<form name="login" action="login_ok.jsp" method="post">
<table class=loginbox border=0>
<tr>
<td colspan="2" id="close_login" class="close_login">X</td> <!--취소버튼-->
</tr>
<tr>
<td align=center colspan="2"><h2>로그인</h2></td>
</tr>
<tr>
<td colspan="2" height=10></td>
</tr>
<tr>
<td class="naverbt" width=100% align=center colspan="2">
<div style="float: left"><img class="icon" src="/img/icon02.PNG"></div>
<div style="float:none; line-height: 2;"><a href="https://nid.naver.com/nidlogin.login?mode=form&url=https%3A%2F%2Fwww.naver.com" text-decoration-line: none>네이버로 시작하기</a></div>
</td>
</tr>
<tr>
<td class="kakaobt" width=100% align=center colspan="2">
<div style="float: left"><img class="icon" src="/img/icon03.PNG"></div>
<div style="float:none; line-height: 2;"><a href="https://accounts.kakao.com/login/?continue=https%3A%2F%2Fkauth.kakao.com%2Foauth%2Fauthorize%3Fencode_state%3Dtrue%26response_type%3Dcode%26redirect_uri%3Dhttps%253A%252F%252Fmember.melon.com%252Foauth.htm%26state%3DCRYT_QoPOExRFFYvp3zu2pt%252Fp8t%252Fb9jh8BRa43Rg%252FLXPgYpcrd0GbC1pE0K8MQBD91IkrmVI34LVyyDEAs3ZX1ctKvA%253D%253D%26through_account%3Dtrue%26prompt%3Dnull%26client_id%3D6cfb479f221a5adc670fe301e1b6690c" text-decoration-line: none>카카오로 시작하기</a></div>
</td>
</tr>
<tr>
<td colspan="2" height=10></td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td colspan="2" height=10></td>
</tr>
<tr>
<td colspan="2">
<div><input class="m_id" id="m_id" name="memberid" placeholder="아이디" style="height: 30px"></div>
</td>
</tr>
<tr>
<td colspan="2">
<div><input class="m_pass" id="m_pass" name="password" placeholder="비밀번호" style="height: 30px"></div>
</td>
</tr>
<tr>
<td colspan="2" height=5></td>
</tr>
<tr>
<td colspan="2">
<input id="m_check" name="m_check" type="checkbox">로그인상태유지
</td>
</tr>
<tr>
<td colspan="2" height=5></td>
</tr>
<tr>
<td colspan="2">
<button class="loginbt">로그인</button>
</td>
</tr>
<tr>
<td colspan="2" height=5></td>
</tr>
<tr>
<td class="a1">
<a href="/member/join.jsp" align=left>회원가입</a>
</td>
<td class="a2" align=right>
<a href="/member/ip_search.jsp">ID·PW 찾기</a>
</td>
</tr>
<tr>
<td colspan="3" height=10></td>
</tr>
<tr>
<td colspan="2" ><hr></td>
</tr>
<tr>
<td colspan="2" height=10></td>
</tr>
<tr>
<td colspan="2">
<button class="checkbt">비회원 조회</button> <!-- 모달창으로 만들기 -->
</td>
</tr>
</table>
</form>
</div>
</td>
</tr>
</table>
header.jsp
<%@ include file="/member/login.jsp" %>
<script>
$("#bnt_login").on("click",function(){
$("#modal_login").show();
});
$("#close_login").on("click",function(){
$("#modal_login").hide();
});
</script>
