반응형
HTML/CSS/JS 모달창(Modal Window) 구현
특정 버튼을 클릭했을 때 모달창을 띄울 것이다. ▪ 기본 버튼 만들기 모달창 열려랏! 모달창 열려랏! ▪ 기본 모달창 만들기 CSS HTML 모달창 열려랏! 제목 X 안녕하세요 이건 모달창이에요 JS - 모
oaho.tistory.com
기본 모달창 띄우는 방법은 위의 글에서 자세하게 다뤘다.
먼저, 버튼을 클릭했을 때 이미지를 띄울 것이다.
<html>
<style>
#modal.modal-overlay {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(71, 58, 58, 0.25);
}
#modal .modal-window {
background: rgba(84, 93, 99, 0.7);
width: 400px;
height: 200px;
position: relative;
}
#modal .title {
padding-left: 10px;
display: inline;
color: white;
}
#modal .title h2 {
display: inline;
}
#modal .close-area {
display: inline;
float: right;
padding-right: 10px;
cursor: pointer;
color: white;
}
#modal .content {
margin-top: 20px;
padding: 0px 10px;
color: white;
}
#dogs{
width:400px;
height:200px;
}
</style>
<body>
<div>
<button id="btn-modal">모달창 열려랏!</button>
</div>
<div id="modal" class="modal-overlay">
<div class="modal-window">
<img id="dogs" src="img\dogs.jpg">
<div class="title">
<h2>제목</h2>
</div>
<div class="close-area">X</div>
<div class="content">
<p>안녕하세요</p>
<p>이건 모달창이에요</p>
</div>
</div>
</div>
<script>
const modal = document.getElementById("modal")
function modalOn() {
modal.style.display = "flex"
}
function isModalOn() {
return modal.style.display === "flex"
}
function modalOff() {
modal.style.display = "none"
}
const btnModal = document.getElementById("btn-modal")
btnModal.addEventListener("click", e => {
modalOn()
})
const closeBtn = modal.querySelector(".close-area")
closeBtn.addEventListener("click", e => {
modalOff()
})
</script>
</body>
</html>전의 코드에서 modal-window에서 img를 넣었다.
그리고 해당 이미지의 style의 width와 height을 알맞게 지정했다.
그런데 여기서 문제가 생긴다!
이렇게 글씨가 내려온다.
해결 방법!!
글자 속성을 "position: absolute" , 사진은 "position: relative" 을 추가했다.
또한, content, title, close-area의 top, bottom,right, left를 조절하며 적절한 위치를 찾았다.
margin, padding도 적절하게 바꾸면 된다.
결과 :
최종 코드 :
<html>
<style>
#modal.modal-overlay {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(71, 58, 58, 0.25);
}
#modal .modal-window {
width: 400px;
height: 200px;
position: relative;
}
#modal .title {
padding-left: 10px;
right:50%;
position:absolute;
display: inline;
color: white;
}
#modal .title h2 {
display: inline;
}
#modal .close-area {
position:absolute;
display: inline;
float: right;
right: 10px;
padding-right: 10px;
cursor: pointer;
color: white;
}
#modal .content {
position:absolute;
color: white;
bottom: 30%;
}
#dogs{
position: relative;
width:400px;
height:200px;
}
</style>
<body>
<div>
<button id="btn-modal">모달창 열려랏!</button>
</div>
<div id="modal" class="modal-overlay">
<div class="modal-window">
<img id="dogs" src="img\dogs.jpg">
<div class="title">
<h2>제목</h2>
</div>
<div class="close-area">X</div>
<div class="content">
<p>안녕하세요</p>
<p>이건 모달창이에요</p>
</div>
</div>
</div>
<script>
const modal = document.getElementById("modal")
function modalOn() {
modal.style.display = "flex"
}
function isModalOn() {
return modal.style.display === "flex"
}
function modalOff() {
modal.style.display = "none"
}
const btnModal = document.getElementById("btn-modal")
btnModal.addEventListener("click", e => {
modalOn()
})
const closeBtn = modal.querySelector(".close-area")
closeBtn.addEventListener("click", e => {
modalOff()
})
</script>
</body>
</html>
사진은
아래 사이트에서 가져왔슴당
무료이미지, 저작권 없는 이미지, 무료 이미지 사이트 | Pexels
www.pexels.com
반응형
'Develop' 카테고리의 다른 글
| 쿠버네티스_따배쿠 강의 정리 (0) | 2024.08.21 |
|---|---|
| [React] vs code에서 yarn start 에러 (0) | 2024.04.01 |
| Git_Repository 삭제 (0) | 2023.07.08 |
| HTML/CSS/JS 모달창(Modal Window) 구현 (2) | 2023.06.26 |
| HTML/CSS 눈금, 슬라이더 구현 (0) | 2023.06.22 |