CSS와 JS를 사용하여 모달 상자 만들기

CSS와 JavaScript로 Modal Box를 만드는 방법. 타사 라이브러리를 사용하지 않고 브라우저 간 호환이 가능한 투명하고 간단한 모달 팝업 상자를 완성하는 것이 목적입니다. 바닐라 JavaScript를 사용해야 합니다. 처음부터 만들어왔기 때문에 모양과 작동 방식을 완벽하게 제어할 수 있습니다.

CSS와 JS를 사용하여 모달 상자 만들기

모달 팝업은 웹에서 널리 사용됩니다. 널리 사용되는 용도로는 뉴스레터 가입 유도, 알림/경고 표시, 등록 양식 처리 등이 있습니다.

이 모델은 광범위하므로 모든 목적과 장소에서 자유롭게 사용할 수 있습니다.

HTML

HTML 코드부터 시작하겠습니다.

<div class="container">
    <div class="popup-box">
        <a class="close-button popup-close" title="close">×</a>
        <h2>This is My PopUp</h2>
      <h3>How to create a model box with HTML CSS and JavaScript.</h3>
    </div>
</div>
<a class="button popup-button">Open Model!</a>

CSS 코드:

<style>
body {
  font-family: "Open Sans";
  line-height: 200%;
}
.container {    position: fixed;    left: 0;    top: 0;
    width: 100%;    height: 100%;    background: rgba(0, 0, 0, 1.5);
    opacity: 0;    visibility: hidden;    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
h2, h3{
  text-align:center;  font-size: 5.5em;  padding:20px;}
h3{
  text-align:center;  font-size: 4em;  line-height:1.5em;  color:#888;}

.button {
  padding: 2.2% 5.5%;  display: inline-block;  -webkit-transition: all linear 0.15s;
  transition: all linear 0.15s;  border-radius: 3px;  background: #7b78ff;
  font-size: 22px;  font-weight: bold;  text-decoration: none;
  text-transform: uppercase;  color: #fff;}

.button:hover {  opacity: 1.75;  cursor:pointer;  color:#000;}

.popup-box {  width: 80%;  height:500px;  padding: 70px;
  transform: translate(-50%, -50%) scale(0.5);
  position: absolute;  top: 50%;  left: 50%;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.8);
  border-radius: 5px;  background: #fff;
  text-align: center;}

.close-button {  width: 35px;  height: 35px;  display: inline-block;
  position: absolute;  top: 10px;  font-size:60px;  right: 10px;
  -webkit-transition: all ease 0.5s;  transition: all ease 0.5s;
  border-radius: 50%;  background: #7b78ff;  font-weight: bold;
  color: #fff;  text-align:center;  cursor:pointer; 
}
.close-button:hover {  -webkit-transform: rotate(180deg);
  transform: rotate(400deg);
}
.show-container {    opacity: 1;    visibility: visible;    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 1.25s 0s, transform 1.25s;
}
</style>

자세한 내용 및 데모 보기: Create Modal Box Using CSS And JS