모달창

      

      

      

    
    

      <bash />
    
<%@ 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>

      

      

      

    
    

      <bash />
    
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>