안녕하세요 이번 게시글에서는 버튼을 클릭했을때 나오는 모달창을 구현해보겠습니다.
우선, 시연영상입니다.
전체 코드입니다.
modal.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>모달 창 예제</title>
<link rel="stylesheet" href="modalstyles.css" /> <!-- 외부 CSS 파일을 연결 -->
</head>
<body>
<div id="btnWrap">
<button typ="button" id="popupBtn">stickcode 모달창 띄우기 버튼</button> <!-- 모달을 띄우는 버튼 -->
</div>
<div id="modalWrap"> <!-- 모달 창을 감싸는 div -->
<div id="modalBody">
<span id="closeBtn">×</span> <!-- 모달을 닫는 X 버튼 -->
<p>모달창 내용!</p> <!-- 모달 창 내용 -->
</div>
</div>
<script src="modalscript.js"></script> <!-- 외부 JavaScript 파일을 연결 -->
</body>
</html>
modalscript.js
const btn = document.getElementById("popupBtn"); // 모달을 띄우는 버튼 요소 가져오기
const modal = document.getElementById("modalWrap"); // 모달 창 요소 가져오기
const closeBtn = document.getElementById("closeBtn"); // 모달을 닫는 버튼(X) 요소 가져오기
btn.onclick = function () {
modal.style.display = "block"; // 버튼을 클릭하면 모달을 보이게 함
};
closeBtn.onclick = function () {
modal.style.display = "none"; // 모달을 닫는 버튼(X)을 클릭하면 모달을 숨김
};
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none"; // 모달 외부를 클릭하면 모달을 숨김
}
};
modalstyles.css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#btnWrap {
width: 500px;
margin: 100px auto;
}
#popupBtn {
width: 150px;
height: 50px;
padding: 10px 5px;
background-color: #007bff;
color: #fff; /* 텍스트 색상을 지정하세요 */
border: none; /* 테두리 제거 */
cursor: pointer;
}
#modalWrap {
position: fixed; /* 화면에 고정 */
z-index: 1; /* 상위에 위치 */
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7); /* 반투명한 배경색 */
display: none; /* 초기에는 숨김 */
}
#modalBody {
width: 500px;
height: 300px;
padding: 30px 30px;
margin: 0 auto;
border: 1px solid #777;
background-color: #fff;
}
#closeBtn {
float: right;
font-weight: bold;
color: #777;
font-size: 25px;
cursor: pointer;
}'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] 탭 메뉴 만들기 (0) | 2024.02.07 |
|---|---|
| [HTML/CSS] 세로 드롭다운 메뉴 (0) | 2024.02.06 |
| [HTML/CSS] 다크모드 구현하기 (0) | 2024.01.20 |
| [HTML/CSS] tailwind를 사용해서 간단한 todo 리스트 만들기 (0) | 2024.01.16 |
| [HTML/CSS] Tooltip 구현하기 (0) | 2024.01.11 |