<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<head>
<meta charset="UTF-8">
<title>회원정보</title>
<!-- 경로)http://localhost:8080/member/memberinfo -->
</head>
<h1>회원정보</h1>
<table border="1">
<p> 아이디 <span th:text="${userid}"></span><br /> </p>
<p> 이메일 <span th:text="${email}"></span><br /> </p>
<p> 가입일 <span th:text="${regdate}"></span><br /></p>
<p> 비밀번호 <span th:text="${userpw}"></span> </p>
</table>
<title>비밀번호 수정</title>
<style>
#modal {
display: none;
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: 100px auto;
padding: 20px 10px;
background: #fff;
border: 2px solid #666;
}
#modal .modal_layer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}
</style>
<body>
<div id="root">
<input type="button" id="modal_open_btn" value="비밀번호 수정" /></input>
</div>
<div id="modal">
<div class="modal_content">
<form class="pwBox">
<p>비밀번호 <span><input type="text" id="newpw" value="" /></span></p>
<p>비밀 번호 확인 <span><input type="text" id="renewpw" value="" /></span></p>
</form>
<input type="button" id="modal_close_btn" value="닫기" /></input>
<input type="submit" id="modal_check_btn" value="확인" onclick="pwcheck()" />
</input>
</div>
<div class="modal_layer"></div>
</div>
<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";
}
document.getElementById("modal_check_btn").onclick = function(){
newpw1.document.getElementById(newpw);
renewpw1.document.getElementById(renewpw);
alert(newpw1);
document.getElementById("modal").style.display = "none";
}
//모달창에서 값이 안넘어감
$(document).ready(function(){ //시도해봤지만 작동안합니다
$("input[type=submit]").click(function(e){
checking(e);
});
function checking(e){//이것도 구현하고싶어요 어디서부터 어떻게 잘못된걸까요ㅠㅠ
if($('input[placeholder=Pass]').val()!=$('input[placeholder=RePass]').val()){
alert("패스워드가 같지 않습니다.");
$('input[placeholder=Pass]').val('');
$('input[placeholder=RePass]').val('');
$('input[placeholder=Pass]').focus();
e.preventDefault();
}
}
});
</script>
</html>
