【　Ruby on Rails　】jQueryでカスタマイズした確認ダイアログを実装

# はじめに
今回はRailsアプリでjQueryでカスタマイズした確認ダイアログを実装します。
javascriptのconfirmメソッドだとダイアログをカスタマイズ出来ないので自作したいと思ったのがきっかけです。

仕様としては以下の通りです。

* **アクションを実行時（今回は申込みアクション）に確認ダイアログを表示**
* **ダイアログ内の申込みボタンを押すとアクションが実行される**
* **ダイアログ内の閉じるボタンを押すとアクションが中断される**
* **ダイアログの外の背景を押すとアクションが中断される**


↓
[実装イメージ](https://gyazo.com/77ecd0383d6e06d107b0f19a548fa08c)

# 目次
[1.hamlの記述](#1-hamlの記述)
[2.scssの記述](#2-scssの記述)
[3.jQueryの記述](#3-jQueryの記述)

## 1. hamlの記述

```php:test.html.haml
= link_to "イベントに申し込む", event_entries_path(@event), class: "entry-btn", id: "js-JoinEvent", method: :post

%label.js-modal-bg　#確認ダイアログの周りの背景
.modal-content #確認ダイアログの中身
  %h1.protocol-1
    申し込み規約
  %h2.protocol-2
    注意事項・禁止事項等
      %p 
        ・荒天・地震・事件・事故・新型コロナウイルス感染症等の感染症・疫病流行等、参加者の安全が確保できない可能性がある場合は、本イベントを中止・中断することがあります。
        %br/
        ・本イベントを中止する場合は、公式ホームページにてご案内するとともに、お申込者の皆様にはメールでご連絡いたします。
        %br/
        ・参加申込者数が定員に達した場合は、それ以降の申込受付を中止する場合があります。
        %br/
        ・イベント中の映像・写真・記事等に関するテレビ・新聞・雑誌・インターネット等への掲載権と肖像権はすべて主催者に属します。

      .protocol-btn-area
        = link_to "閉じる", "#", id: "js-modal-close", class: "entry-btn"
        = link_to "イベントに申し込む", event_entries_path(@event), class: "entry-btn", method: :post
```
ポイントがいくつかあります。

### labelタグのjs.modal-bgとmodal-contentは同じインデントで揃える
このlabelタグは後のscssで画面いっぱいに広げて、黒い背景になります。
このlebelタグにすることで黒い背景をクリックしても確認ダイアログを閉じることが出来ます。

### 閉じるボタンのlink_toのリンク先は"#"にしておく
閉じるボタンを押したらアクションは中断してほしいので、リンク先は設定しません。

## 2. scssの記述

```php:test.scss
.js-modal-bg {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: none;
}
.modal-content {
  width: 65vw;
  height: auto;
  display: none;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 40px;
  transform: translate(-50%, -50%);

  .protocol-1 {
    text-align: center;
    font-weight: bold;
    font-size: 3rem;
    color: red;
    margin-bottom: 50px;
   }
   .protocol-2 {
     font-weight: bold;
     font-size: 2rem;
     margin-bottom: 20px;
   }
   .protocol-btn-area {
     margin-top: 50px;
     display: flex;
     justify-content: space-evenly;
   }
 }
```
link_toや確認アイアログの中の細かい調整はお好みで調整出来ます。
大事なのは、`.js-modal-bg`と`.modal-content`の記述です。

### .js-modal-bg
この黒い背景は申込むボタンを押したときに出現してほしいので`display:none`で最初は隠しておきます。
次に`position:fixed`で位置を固定し、`width`と`height`で画面いっぱいに広げます。

### .modal-content
`modal-content`も最初は非表示にしておきたいので`display:none`で隠しておきます。
ダイアログの幅や高さはお好みで調整出来ます。

## 3. jQueryの記述

```php:test.js
$(document).on('turbolinks:load', function() {
  // turbolinksを無効化したい処理
  $(function(){
    //申込むボタンが押されたら確認ダイアログと黒背景を表示
    $('#js-JoinEvent').on('click',function(){
      $('.js-modal-bg').fadeIn();
      $('.modal-content').fadeIn();
      return false;
    });
    //閉じるボタンが押された場合はデフォルトのlinkの効果をキャンセル
    $('#js-modal-close').on('click',function(){
      $('.js-modal-bg').fadeOut();
      $('.modal-content').fadeOut();
      return false;
    });
    //黒背景を押したらモーダルを閉じる
    $(".js-modal-bg").on('click', function() {
      $('.js-modal-bg').fadeOut();
      $('.modal-content').fadeOut();
    });
  });
});
```
ポイントは`return false;`です。
この記述があることでlink_toの本来の画面遷移するデフォルトの効果を無効化にすることが出来ます。

これで確認ダイアログ内の申込むボタンを押したときだけ、アクションが実行され、
閉じるボタンと黒背景を押したときにアクションがキャンセル出来ます。

# 終わりに
最後まで読んでいただきありがとうございます！
参考になれば幸いです。
お疲れさまでした。。