모달 창 만들기! (구매 확인)

모달 창이란 무엇입니까? ? ?

모달이란 "모드가 있다"는 의미로 "이 창을 닫을 때까지 아무 것도하지 않습니다"라는 창입니다.

(흠 흠, 어떤 시간에 활용됩니까?)

모달 윈도우는 사용자에게 중요한 조작이나 확인을 촉구하거나 할 때 사용되는 경우가 많습니다!
또, 모달 윈도우는 「JavaScript」로 만들어지는 경우가 많습니다.

(과연! 개요는 알았기 때문에 즉시 구현에 들어가고 싶습니다.)

이번 완성품

사용자는 빨간색 구매 버튼을 누르면 이렇게 확인 모달 창이 나타납니다.
2단계 표시로 하는 것으로, 의도하지 않고 구입 버튼을 눌러 버렸을 때의 오작동을 피할 수 있습니다!

전제 조건

이미 컨트롤러 등에서 버튼이나 링크를 누르면 데이터가 구입되는 기능
페이지에 이미 구현되어 있다고 가정합니다.

샘플 코드(index.html.haml)

index.html.haml

%button#buy-button  購入する
              = link_to "", "/purchase/pay/items/#{@item.id}", method: :post, id: 'item-purchase-btn'
              #buy-overlay
                #buy-modalWindow
                  .buy-modal-message-box
                    %div 確認
                    %div 本当に購入しますか？
                  %button#buy-modal-close-btn キャンセル
                  %button#purchase-comformation-btn 購入する

#buy-overlay 다음은 모달 윈도우의 설명입니다.
모달 윈도우를 표시시키기 위한 버튼아래에 기술해 가는 것이 포인트입니다!

샘플 코드 (purchase.scss)

purchase.scss

#buy-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  display: none;
  z-index: 1;
}

#buy-modalWindow {
  width: 500px;
  height: 200px;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .buy-modal-message-box {
    width: 100%;
    height: calc(100% - 60px);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  #buy-modal-close-btn {
    width: 50%;
    height: 60px;
  }
  #purchase-comformation-btn {
    width: 50%;
    height: 60px;
  }
}

#item-purchase-btn {
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

이쪽은 기호로 설정해 주세요!

샘플 코드(modal.js)

modal.js

document.addEventListener(
  "DOMContentLoaded", e => {
    let modal_open = document.getElementById("buy-button");
    modal_open.onclick = function (e) {
      e.preventDefault(); 
      $('#buy-overlay').fadeIn();
      document.getElementById('buy-modal-close-btn').onclick = function () {
        $('#buy-overlay').fadeOut();
      };
      document.getElementById("purchase-comformation-btn").onclick = function (e) {
        e.preventDefault(); 
        document.getElementById("item-purchase-btn").click();
      };
    };
  },
  false
);

빨간색 버튼을 누르면 모달 창이 페이드 인되고,
모달 윈도우의 취소 버튼을 눌렀을 때, 모달 윈도우가 페이드 아웃되도록 설정하고 있습니다!

그리고 모달 윈도우의 구매 버튼을 눌렀을 때 link_to가 발화되도록 설정했습니다!

이것으로 설정이 완료됩니다!

꽤 생략하면서의 설명이 되었으므로, 불명한 점 있으시면 부담없이 코멘트 부탁드립니다!

조용히 감사합니다!