JavaScript

[JavaScript] 팝업 만들기

simonpark817 2024. 4. 28. 22:53

[팝업 만들기]

  • 이번에는 JavaScript를 사용해서 팝업창을 만들어보도록 합시다.
  • 만들어 볼 팝업창의 기본 기능은 다음과 같습니다.
  • 버튼을 눌렀을 때, 화면 중앙에 팝업창이 생기게 되고, 팝업창이 열리게 되는 순간, 화면의 배경색은 살짝 어두운 색상으로 변하게 된다.
  • 팝업창을 닫기 위해서는 팝업창의 x 버튼을 누르거나, 팝업창 바깥의 어두운 배경을 마우스로 아무데나 클릭했을 때 팝업창이 닫히게 된다.
  • 아래는 먼저 구현된 HTML, CSS JS 코드이며 각 섹션별로 코드 풀이를 해보려한다.

See the Pen 팝업 복습 by psm817 (@psm817) on CodePen.

 

[HTML]

  • html 하단의 텍스트로 된 box-3 부분을 제외하고 마크업한 코드를 아래 작성하였다.
<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="popup-box-1 popup-box-type-a">
    <div class="popup">
       <div class="head">
          <div class="btn-close"></div>
       </div>
       <div class="body">
            팝업 내용 : 복습을 끊임없이 해야 내 것이 되리라..
       </div>
    </div>
</div>
<div class="popup-box-2 popup-box-type-a">
    <div class="popup">
       <div class="head">
          <div class="btn-close"></div>
       </div>
       <div class="body">
            팝업 내용2 : 항상 열심히 임하는 자세를 보이거라..
       </div>
    </div>
</div>

<div class="box-1 con">
    <button class="btn-show-popup-1">팝업열기1</button>
</div>
<div class="box-2 con">
    <button class="btn-show-popup-2">팝업열기2</button>
</div>
  • 먼저 자바 스크립트를 사용하기 위해 HTML 상단에 제이쿼리 라이브러리를 가져왔다.
  • 팝업창을 여는 버튼은 총 2가지로 .btn-show-popup-1과 .btn-show-popup-2가 있다.
  • 팝업 내용을 담은 .popup-box-1과 .popup-box-2는 같은 유형의 팝업창이기 때문에 공통의 클래스인 .popup-box-type-a를 가지고 있다.

 

[CSS]

  • CSS는 노멀라이즈와 기본적인 디자인을 제외한 코드를 가져왔다.
/* 커스텀 */
.con {
    max-width: 800px;
}

/* 팝업내용 */
.popup-box-type-a {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    transition: background-color .5s;
    visibility: hidden;
}

.popup-box-type-a > .popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 60%;
    border: 10px solid green;
    background-color: #fff;
}

.popup-box-type-a > .popup > .head {
    padding: 20px 20px 0 20px;
}

.popup-box-type-a > .popup > .body {
    padding: 20px;
    color: red;
    font-weight: bold;
}

.popup-box-type-a > .popup > .head > .btn-close {
    width: 50px;
    height: 50px;
    margin-left: auto;
    position: relative;
    cursor: pointer;
}

/* x 버튼 만들기 */
.popup-box-type-a > .popup > .head > .btn-close::before,
        .popup-box-type-a > .popup > .head > .btn-close::after {
    content: "";
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    height: 20%;
    background-color: green;
    transform: rotate(45deg);
}

.popup-box-type-a > .popup > .head > .btn-close::after {
    transform: rotate(-45deg);
}

.popup-box-type-a > .popup > .head > .btn-close:hover {
    transform: rotate(10deg);
}

/* html의 popup-1-active라는 클래스가 있을 때 popup-1 커스텀 */
/* 팝업 1 */
html.popup-1-active .popup-box-1 {
visibility: visible;
background-color: rgba(0, 0, 0, 0.5);
}

html.popup-1-active {
    overflow: hidden;
}

/* 팝업 2 */
html.popup-2-active .popup-box-2 {
visibility: visible;
background-color: rgba(0, 0, 0, 0.5);
}

html.popup-2-active {
    overflow: hidden;
}
  • .popup-box-type-a는 각 버튼을 눌렀을 때 화면에 보여야하고, 팝업 내용이 보이는 순간, 배경 색상을 살짝 어둡게 변화를 줘야한다.
  • 그렇기 때문에 유령화를 시켜주는 position: absolute를 적용시키고, 팝업 내용이 평소에는 보이지 않게 visibility: hidden 이라는 속성을 추가한다.
  • 하지만 지금 화면과 같이 텍스트가 끊임없이 쭉 내려갈 때, absolute를 적용하면 스크롤을 해서 밑으로 내릴 땐 해당 속성들이 적용이 되지 않기 때문에 position 속성을 fixed로 변경해야한다.
  • .popup 에는 실제 팝업 창에 대한 커스텀이 들어가는데, 이 또한 position: absolute를 적용하고, 버튼을 눌렀을 때 팝업창이 화면의 가운데에 위치해야한다.
  • 화면의 가운데에 위치하기 위해선, left: 50%와 top: 50%을 적용하면 되지만 막상 적용했을 때, 우리가 원하는 가운데의 위치가 아닐 것이다. 그 이유는 여기서 맞춘 left와 top은 팝업창의 왼쪽 상단 꼭지점이 기준이 되기 때문에, 팝업창 자체가 가운데에 오려면 transfrom: translateX(-50%) translateY(-50%)를 함께 적용해야한다.
  • 팝업창 안의 x버튼은 .btn-close에서 커스텀이 들어가는데, x라는 아이콘이나 텍스트를 HTML에 적용하는 것이 아니라, before와 after를 사용해서 내용은 비어있는 막대기를 만들어준다. 이 때, x자 모양을 만들기 위해선 각도의 조정이 필요한데 속성값으로 transform: rotate(45deg)를 적용한다. 말 그대로 45도 회전을 한다는 뜻이다.
  • 지금 .popup-box-1과 .popup-box-2는 .popup-box-type-a의 의해 visibility: hidden 상태가 적용되어 있다. 이를 다시 보여주기 위해 html.popup-1(2)-active .popup-box-1(2) { } 선택자를 지정하여 visibility: visible 상태로 변경해준다.
  • html.popup-1(2)-active .popup-box-1(2) { }는 html 태그의 클래스 명이 popup-1(2)-active 라면 .popup-box-1(2)의 속성을 변경하겠다 라는 의미이다. 
  • 마지막으로 팝업 버튼을 눌러서 화면이 전환되었을 때는 본문에 있는 텍스트들의 스크롤이 필요없기 때문에 overflow: hidden을 적용한다. 

 

[JavaScript]

// 팝업 1
$('.btn-show-popup-1').click(function() {
    $('html').addClass('popup-1-active');
})

$('.popup-box-1, .popup-box-1 > .popup > .head > .btn-close').click(function() {
    $('html').removeClass('popup-1-active');
})

$('.popup-box-1 > .popup').click(function(e) {
    e.stopPropagation();
})

// 팝업 2
$('.btn-show-popup-2').click(function() {
    $('html').addClass('popup-2-active');
})

$('.popup-box-2, .popup-box-2 > .popup > .head > .btn-close').click(function() {
    $('html').removeClass('popup-2-active');
})

$('.popup-box-2 > .popup').click(function(e) {
    e.stopPropagation();
})
  • CSS에서 정의한 html의 popup-1(2)-active 클래스를 자바 스크립트에서 생성 및 제거하려한다.
  • HTML에서 onclick이라는 속성으로 자바 스크립트의 함수를 실행시킬 수 있듯이, 자바 스크립트에서 직접 click을 사용해서 함수를 호출할 수도 있다.
  • $('.btn-show-popup-1(2)').click(function() { $('html').addClass('popup-1(2)-active'); }) 은 .btn-show-popup-1(2) 태그인 버튼을 클릭하면 function을 수행하는데, function의 내용은 html 태그에 popup-1(2)-active 라는 클래스를 추가하라는 의미이다.
  • 이렇게 버튼을 누르게 되면 실제로 해당 클래스가 추가됨과 동시에 CSS에 적용한 visibility: visible이 실행된다.
  • $('.popup-box-1, .popup-box-1 > .popup > .head > .btn-close').click(function() { $('html').removeClass('popup-1-active'); }) 은 addClass와는 반대로 x버튼을 클릭하거나 팝업창을 제외한 화면을 클릭했을 때 html의 클래스를 삭제한다는 의미이며, 실제로 클래스가 삭제됨과 동시에 다시 visibility: hidden이 실행된다.
  • 위에서 removeClass를 할 때 저렇게 두 개의 선택자를 지정해도 팝업창 안의 내용을 클릭했을 때도 팝업창이 지워지는 에러가 발생한다. 이와 같은 에러를 방지하기 위해서 $('.popup-box-1 > .popup').click(function(e) { e.stopPropagation(); }) 를 작성하여 .popup-box-1 아래의 .popup 밑의 모든 태그에서 실행을 멈추도록 하고, btn-close 에서만 removeClass가 가능하도록 해준다.
반응형