JS Coding
[JavaScript] 모달 직접 만들어 보기 본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper {
margin: 200px auto; /* 수평 가운데 정렬 */
width: 70%;
border: 1px solid black;
}
#modal {
position: fixed;
left: 0; top: 0;
width:100%;
height:100%;
background-color: rgba(0, 255, 0, 0.7);
display: none; /* 처음엔 안보여야 하므로 none */
}
#modalContent {
width: 50%;
height: 80%;
margin: 50px auto; /* 수평 중앙 정렬 */
background-color: black;
color: white;
}
</style>
</head>
<body>
<!-- 나의 모달 -->
<div id="modal">
<div id="modalContent">
<h1>난 최고의 프로그래머</h1>
<button id="clsBtn">X</button>
</div>
</div>
<!-- 보통 메인 영역은 wrapper나 container란 이름을 지정 -->
<div id="wrapper">
<button id="modBtn">모달열기</button>
</div>
<script>
const modBtn = document.querySelector('#modBtn');
const clsBtn = document.querySelector('#clsBtn');
const modal = document.querySelector('#modal');
modBtn.addEventListener('click', function(){
modal.style.display = 'block'; // 보이게 한다.
});
clsBtn.addEventListener("click",function(){
modal.style.display = 'none';
});
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [JavaScript] Chat.js 를 이용한 차트 만들기 (0) | 2023.11.10 |
|---|---|
| [JavaScript] 자바스크립트에서 사용되는 "This" 2편 (0) | 2023.11.10 |
| [JavaSciprt] 자바스크립트에서 사용되는 "This" (0) | 2023.11.10 |
| [JavaScript] JQuery 원리1 (기본구조) (0) | 2023.11.07 |
| [JavaScript] JQuery 원리2 (용도의 다양성) (0) | 2023.11.07 |
'JavaScript' Related Articles
more
