답글 달기 기능 구현
z-index 를 사용하여 display:none 으로 보이지 않게 태그를 겹쳐놓은 뒤 덮어씌워서 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#modal_wrap {
display: none;
position: fixed;
z-index: 0;
margin: auto;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
#first {
display: none;
position: fixed;
z-index: 1;
margin: auto;
top: 30px;
left: 0;
right: 0;
width: 300px;
height: 350px;
background: rgba(233, 38, 38, 0.4);
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
const reply = () => {
$("#first").slideDown("slow");
$("#modal_wrap").show();
};
const slide_hide = () => {
$("#first").slideUp("fast");
$("#modal_wrap").hide();
};
</script>
</head>
<body>
<div id="modal_wrap">
<div id="first">
<div style="width: 250px; margin: auto; padding-top: 20px">
<b>답글 작성 페이지</b>
<b>작성자 : 홍길동</b>
<b>제목 : </b><input type="text" /><br />
<b>내용 : </b><br /><textarea cols="30" rows="5"></textarea>
<hr />
<button type="button">답글</button>
<button type="button" onclick="slide_hide()">취소</button>
</div>
</div>
</div>
<h1>내용 작성 합니다</h1>
<p>배부르다</p>
<button onclick="reply()">답글 달기</button>
</body>
</html>728x90
'FE > JavaScript' 카테고리의 다른 글
| [JavaScript] jquery_ui - datepicker, draggable (0) | 2024.03.27 |
|---|---|
| [JavaScript] jquery - slideDown, slideUp 메소드 (0) | 2024.03.27 |
| [JavaScript] append, html (0) | 2024.03.27 |
| [JavaScript] animate (0) | 2024.03.27 |
| [JavaScript] 클래스 추가, css 추가 (0) | 2024.03.27 |