제일 먼저 마주했던 작업. 혼자서 이렇게 저렇게 만들었던 기억이 나서 잊지 않고 정리해본다.
<HTML>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<p class="modal-content-text">모달창 만들기</p>
<span class="close">확인</span>
</div>
</div>
<CSS>/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
width: 100%; /* Full width */
height: 100%; /* Full height */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
margin: 57px 42px;
border: 1px solid #888;
width: 272px;
height: 156px;
border-radius: 15px;
background-color: #ffffff;
}
/*modal text*/
.modal-content-text {
margin-top: 57px;
margin-left: 42px;
margin-right: 42px;
opacity: 0.8;
font-family: NotoSansCJKKR;
font-size: 14px;
/* font-weight: normal;
font-stretch: normal;
font-style: normal; */
line-height: 1.29;
letter-spacing: -0.7px;
text-align: center;
color: #000000;
}
/* The Close Button */
.close {
color: #000;
font-size: 16px;
font-weight: normal;
padding: 0;
overflow: hidden;
margin:auto;
display:table;
vertical-align: bottom;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}/* modal 받기*/
var modal = document.getElementById('myModal');
/* 모달 여는 button 가져오기*/
var footer = document.getElementById("myBtn");
/* modal 닫는 <span> 가져오기*/
var span = document.getElementsByClassName("close")[0];
/* 다음 클릭 시, modal 열기 */
footer.onclick = function() {
if (document.getElementById("allCheck").checked){
modal.style.display = "none";
} else {
modal.style.display = "block";
}
}
/* <span> 확인 눌렀을 때, modal 닫기 */
span.onclick = function() {
modal.style.display = "none";
}
/* modal 밖에 누를 시 닫기 */
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
이런 결과가 나오게 된다!
Front End Developer