반응형
방법
1. html / css ui를 만든다
2. css를 숨긴다
3. JS로 다시 나타나게 한다
<1-2단계>
<body>
<h1>제목입니다</h1>
<p>내용</p>
<button>수정하기</button><br>
<button>삭제하기</button>
<div class="modalDiv">
<div class="bg"></div>
<div. class="modal">
<p>정말 삭제하시겠습니까?</p>
<button>취소</button>
<button>삭제</button>
</div>
</div>
</body>\
body, p {
margin:0px;
}
.modalDiv{
display: none;
}
.bg {
width: 100vh;
height: 100vw;
background-color: rgba(0,0,0,.5);
position: fixed;
z-index: 1;
top: 0;
left: 0;
}
.modal {
position: absolute;
z-index: 10;
background-color: white;
width: 50%;
left: 25%;
top: 25%;
padding: 20px;
border-radius: 14px;
}modaldi대무
modalDiv는 처음엔 보면서 만들어야 하기 때문에 display block 으로 놓고
2번 숨김 단계에선 block이 아니라 none으로 변경해주면 됨.
<3단계>
<body>
<h1>제목입니다</h1>
<p>내용</p>
<button>수정하기</button><br>
<button onclick="모달창열기()">삭제하기</button>
<div class="modalDiv">
<div class="bg"></div>
<div. class="modal">
<p>정말 삭제하시겠습니까?</p>
<button>취소</button>
<button>삭제</button>
</div>
</div>
</body>
<script>
function 모달창열기 (){
var 모달 = document.querySelector(".modalDiv");
모달.style.display = "block";
console.log(모달);
};
</script>
<body>
<h1>제목입니다</h1>
<p>내용</p>
<button>수정하기</button><br>
<button onclick="모달창열기()">삭제하기</button>
<div class="modalDiv">
<div class="bg" onclick="모달창닫기()"></div>
<div. class="modal">
<p>정말 삭제하시겠습니까?</p>
<button onclick="모달창닫기()">취소</button>
<button>삭제</button>
</div>
</div>
</body>
<script>
function 모달창열기 (){
var 모달 = document.querySelector(".modalDiv");
모달.style.display = "block"
};
function 모달창닫기(){
var 모달 = document.querySelector(".modalDiv");
모달.style.display = "none";
}
</script>
모달창에 취소 버트을 누르거나 빈 공간을 눌렀을 때 모달창이 닫히게 할 수 있음
<body>
<h1>제목입니다</h1>
<p>내용</p>
<button>수정하기</button><br/>
<button onclick="모달창열고닫기('block')">삭제하기</button>
<div class="modalDiv">
<div class="bg" onclick="모달창열고닫기('none)"></div>
<div. class="modal">
<p>정말 삭제하시겠습니까?</p>
<button onclick="모달창열고닫기('none')">취소</button>
<button>삭제</button>
</div>
</div>
</body>
<script>
function 모달창열고닫기(인자){
var 모달 = document.querySelector(".modalDiv");
모달.style.display = 인자;
}
</script>
반복되는말들을 단축하기 위해 function 모달창열고닫기로 함께 사용할 수 있음
반응형
