.modal__background{
position: fixed;
top:0; left: 0; bottom: 0; right: 0;
background: rgba(0, 0, 0, 0.8);
}
.modal__box{
position: absolute;
top: calc(50vh - 100px); left: calc(50vw - 200px);
background-color: white;
display: flex; justify-content: center;
align-items: center;
border-radius: 10px;
width: 400px;
height: 200px;
}이렇게하고
<div class="modal__background">
<div class="modal__box">
Hello, this is modal window
</div>
</div>이렇게
아래는 애플코딩에서 연습했던 부분.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<style>
.alert-box {
display: none;
/* display: block; */
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 10px;
}
.list-group {
display: none;
}
.show {
display: block;
}
.modal-background.show {
display: block;
}
.modal-background {
display: none;
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
bottom: 0;
right: 0;
top: 0;
left: 0;
z-index: 100;
}
.modal-window {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 30px;
position: absolute;
width: 400px;
height: 200px;
background-color: aliceblue;
top: calc(50% - 100px);
left: calc(50% - 200px);
}
</style>
<body>
<div class="modal-background">
<div class="modal-window">
<p>hello</p>
<button class="modal-close" onclick="toggleModal()">X</button>
</div>
</div>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="alert-box" id="alert">
<p id="alert__text">
알림창
<span>hello</span>
</p>
<button onclick="알림창열기('none')">close</button>
</div>
<button onclick="알림창열기('block', '아이디')">버튼1</button>
<button onclick="알림창열기('block', '비번')">버튼2</button>
<button class="modal-close" onclick="toggleModal()">X</button>
<script>
const button = document.querySelector(".navbar-toggler");
const menu = document.querySelector(".list-group");
button.addEventListener("click", () => {
menu.classList.toggle("show");
});
function toggleModal() {
const modal = document.querySelector(".modal-background");
modal.classList.toggle("show");
}
function 알림창열기(구멍, 글자) {
const alert = document.getElementById("alert");
alert.style.display = 구멍;
document.getElementById(
"alert__text"
).innerText = `${글자}를 입력하세요.`;
}
</script>
</body>
</html>