CSS만으로 간단한 모달(Modal)창 레이어 팝업 만들기

이미 모달창(레이어팝업) 만들기는 여러번 소개했다.

 

2024.04.04 - [IT/Javascript] - 자바스크립트(Javascript) 간단한 모달(Modal)창 레이어 팝업 만들기

자바스크립트(Javascript) 간단한 모달(Modal)창 레이어 팝업 만들기

반응형

2024.03.20 - [IT/JQuery] - 제이쿼리(JQuery) 간단한 모달(Modal)창 레이어 팝업 만들기

제이쿼리(JQuery) 간단한 모달(Modal)창 레이어 팝업 만들기

 

모달창을 숨겼다가 보이는 과정에서 제이쿼리(Jquery)나 자바스크립트(Javascript)를 사용하게 되는데
스크립트를 사용하지 않고 CSS만 활용해서 모달창을 만들 수 있는 방법이 있다.
바로 input의 checkbox와 label을 활용하여 체크박스의 checked로 체크를 해서 모달창을 여닫는 방법이다.

html 코드

<input type="checkbox" id="modal">
<label for="modal" class="modal-btn">CSS모달</label>
<div class="dialog">
   <div class="tb">
     <div class="inner" style="max-width:800px;">
       <div class="top">
         <div class="title">모달창 제목</div>
            <label for="modal" class="close">&times;</label>
         </div>
          <div class="ct">
          모달 창 내용
          </div>
        </div>
      </div>
    </div>

 

위 코드에서도 알 수 있듯이, 모달을 보이게 하는 버튼과 닫기버튼은 label로 작성을 한다.

두 label 버튼은 for속성을 이용하여 체크박스(checkbox)를 연결을 한다.

자바스크립트나 제이쿼리를 사용하지 않기 때문에 위의 구조를 지켜줘야 한다.

for속성은 이전 글에서 설명 했기 때문에 따로 설명을 하지는 않겠다.

 

2024.03.26 - [IT/HTML & CSS] - HTML 체크박스(checkbox) 만들기 input checked 속성

HTML 체크박스(checkbox) 만들기 input checked 속성

CSS코드

#modal{
  display:none;
}
.modal-btn{
  background-color: #4CAF50; 
  color: white; 
  padding: 10px 20px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  cursor: pointer; 
  border-radius: 4px; 
}
.dialog {
  display:none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

.dialog>.tb {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.dialog>.tb .inner {
  width: 100%;
  padding: 20px;
  background: #fff;
  border-radius: 16px;
}

.dialog .top {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  justify-content: space-between;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.dialog .title {
  font-weight: bold;
  font-size: 20px;
}

.dialog .ct {
  max-height: 60vh;
  height: 60vh;
  overflow-y: auto;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #fff;
}

input[id="modal"]:checked + label + .dialog{
    display: block;
}
.close{
  font-size:25px;
  cursor:pointer;
}

 

CSS를 활용하여 input을 숨겨준다.

그리고 체크 박스가 checked 됐을때 모달 창을 display의 값을 block으로 설정해주면 HTML과 CSS만으로 모달창을 만들 수 있다.

 

최종코드

See the Pen javascript by 문정현 (@wqmlgxov-the-flexboxer) on CodePen.

오늘은 포스팅은 여기까지입니다.

끝까지 읽어주셔서 감사합니다.