モーダルウィンドウの作成！（購入確認）

モーダルウィンドウってなに？？？

モーダルとは「モードを持つ」という意味で、「あなたがこのウィンドウを閉じるまでなにもさせません」というウィンドウのことです。

(ふむふむ、ではどのような時に活用されるの？)

モーダルウィンドウはユーザーに重要な操作や確認を促したりするときに用いられることが多いです！
また、モーダルウィンドウは「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が発火されるように設定しました！

---

以上で設定は完了となります！

かなり省きながらの説明になりましたので、ご不明な点ございましたらご気軽にコメントお願いします！

ご静聴ありがとうございました！