【jQuery】モーダルプラグイン『Remodal』のカスタマイズ

Question

実現したいこと

モーダル内の「閉じるのボタン」をLP内にある問い合わせまで飛ぶように設定したいです。
jQueryで上書きする場合どのようなコードになるでしょうか。
よろしくお願いいたします。

また、下記のような複数モーダルを使用しています。
https://125naroom.com/web/3202#%e3%83%a2%e3%83%bc%e3%83%80%e3%83%ab%e3%81%ae%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%ef%bc%88%e5%90%8c%e3%81%98%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%ab%e8%a4%87%e6%95%b0%e3%83%a2%e3%83%bc%e3%83%80%e3%83%ab%ef%bc%89

『Remodal』↓
https://vodkabears.github.io/remodal/

発生している問題・分からないこと

すでに設定されているボタンとは別にaタグでボタンを作成し、
jQueryでモーダルが閉じるように設定してみたのですが、うまく作動しないです。

該当のソースコード

<section class="modal_space">
            <a href="#modal_02" class="btn btn_pink">詳細はこちら</a>
            <div class="remodal" data-remodal-id="modal_02">
                <div class="remodal-rerative">
                <div  data-remodal-action="cancel" class="remodal-cancel remodal-cancel_btn">×</div>
                <p class="modal_maintitle">求人詳細</p> 
                <ul class="modal_list">
                  <li class="modal_item">
                    <p class="modal_title">最寄り駅</p>
                    <p class="modal_txt">東京メトロ南北線沿線</p>
                  </li>
                  <li class="modal_item">
                    <p class="modal_title">定員数</p>
                    <p class="modal_txt">64名</p>
                  </li>
                  <li class="modal_item">
                    <p class="modal_title">勤務時間</p>
                    <p class="modal_txt">13：00 ~ 18：00／13：30 ~ 18：30</p>
                  </li>
                  <li class="modal_item">
                    <p class="modal_title">勤務日</p>
                    <p class="modal_txt">月～金／週1 ~ 2日</p>
                  </li>
                  <li class="modal_item">
                    <p class="modal_title">担当業務</p>
                    <p class="modal_txt">フリー、保育補助</p>
                  </li>
                  <li class="modal_item">
                    <p class="modal_title">待遇</p>
                    <p class="modal_txt">有給休暇・産育休あり・交通費全額支給・社会保険完備</p>
                  </li>
                </ul>
              </div>
              <button data-remodal-action="cancel" class="remodal-cancel">閉じる</button>
            </div>
          </section>

/* modal */
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 38px;
  box-sizing: border-box;
  text-decoration: none;
  transition-duration: 0.3s;
      font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #f68210;
    border: 2px solid #f68210;
    background: transparent;
    text-align: center;
    border-radius: 20px;
    position: relative;
    top: -119px;
    margin: 0 auto;
}
.btn:hover {
  background: #b4b1a0;
  color: #ffffff;
}

.btn_pink{
    color: #fd5a56;
    border: 2px solid #fd5a56;
}

.remodal {
  position: relative;
  padding: 35px;
}
.remodal img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.remodal-cancel {
  color: #fff;
  background: #f68210;
  width: 100%;
  margin-top: 25px;
}
.remodal-cancel:hover {
  background: #333;
}

.remodal-cancel_btn{
    position: absolute;
    top: -2%;
    left: 75%;
    font-size: 1rem;
    color: #fff;
    background: #f68210;
    width: 0%;
    text-align: center;
}

.modal_space{
  margin-bottom: -70px;
}

.modal_maintitle{
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #f68210;
    text-align: left;
}

.modal_title{
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 1.2rem;
    font-weight: 550;
    color: #f68210;
}

.modal_txt{
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #54393d;
    margin-top: 10px;
}

.modal_list{
  margin: 10px 0px;
}

.modal_item{
  margin-top: 20px;
  text-align: left;
}

.modal_item::after{
  content: "";
  width: 100%;
  height: 1px;
  background-color: #f68210;
  display: block;
  margin-top: 5px;
}

```jQueryはRemodalのremodal.min.jsを使用

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
『Remodal』のボタンカスタマイズは出てきませんでした。

### 補足
特になし

Comments

[maisumakun]

実際に書いてみたコードをご提示いただけますか？

[Lhankor_Mhy]

『モーダル内の「閉じるのボタン」をLP内にある問い合わせまで飛ぶように設定したい』とのことですが、通常の閉じる動作は起こらないようにして、その代わりに問い合わせまで飛ぶようにしたい、という理解であっていますか？

[yus]

コード追加いたしました！
jQueryは実装できているのですが、コードが見れないです...

お手数をおかけしますが、ご教示いただけますと幸いです！

[yus]

Lhankor_Mhyさん
ご認識の通りです！
代わりの問い合わせボタンでモーダルを閉じるようにJSで設定しても上手くいかず...

[Lhankor_Mhy]

試してみましたが、モーダルが開いているとスクロールができないようにCSSが書かれているようでした。また、黒いバックドロップも表示されているようです。

ですので、モーダルが閉じる動作を起こらないようにしてその代わりに問い合わせまで飛ぶようにしたい、というのはできないこともないと思うのですが、Remodal の標準的な動作からかなり外れることになると思います。モーダルを閉じた後にスクロールさせた方が無難なような気がします。

ご希望の動作をもう一度整理してみてはどうでしょうか？

[yus]

ご確認いただきありがとうございます...!

クライアントの意向で「問い合わせ」につながるLPにしたいので、

「モーダルが閉じる動作を起こらないようにしてその代わりに問い合わせまで飛ぶようにしたい」
OR
「モーダルが閉じて、問い合わせまで飛ぶようにしたい」

上記を実装したいという内容でした。

『Remodal』のJSである、remodal.min.jsの中身が見れれば「モーダルを閉じる」jsコードに
「お問い合わせボタン」のクラス名をつければ解決しそうと思っていましたが、
remodal.min.jsの中身が見れず、上書きできない状態です...

[Lhankor_Mhy]

OR ということは、閉じようと閉じまいとどちらでもいいということですか？

[yus]

すみません。モーダルはどっちにしろ閉じたいです！
問い合わせの場所に飛んでモーダルは閉じたい形になります！

Answer 1

data-remodal-actionを削除して、アンカーリンクを貼ればいいかと思います。
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/xj05wpa2/

<div  data-remodal-action="cancel" class="remodal-cancel remodal-cancel_btn">×</div>

↑を↓に

<a href="#contact">
  <div class="remodal-cancel remodal-cancel_btn">×</div>
</a>

下のボタンも同様に。

---

現状のWEB標準から考えますと、ターゲットデバイスに縛りがないのであれば、昔のライブラリを使わずにdialog要素を使った方がいいかと思います。
老婆心ながら。

参考：
モーダルUIをシンプルにできる！ 進化を続けるHTMLのdialog要素 - ICS MEDIA

---

コメントを受けて追記

イベントを拾う形ではどうでしょうか。
変更したサンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/xj05wpa2/1/

$(document).on('closing', '.remodal', function (e) {
  window.location.hash = '#contact';
});

Comments

[yus]

分かりやすいご説明ありがとうございます！確認いたします！

[Lhankor_Mhy]

あー、モーダルは閉じたいんですね。では、これではダメですね。

[Lhankor_Mhy]

追記しました。

[yus]

回答ありがとうございます。試してみましたが解決できませんでした。一つのモーダルでしたらできました！

・複数モーダルウィンドウのため、aタグで①モーダル内容②モーダル内容など要素を指定したのですが、
②モーダル内容は反応せず①モーダル内容のみ反応した形となりました。

### 該当のソースコード

```HTML
<div id="slide06">
<div class="item"><img class="job_img" src="assets/images/6.webp" alt=""></div>

<div class="bl_button_inner">
<button id="showDialog" class="js_dialog_open el_button" data-dialog="#js_dialog_1">dialog1を開く</button>
</div>

<dialog id="js_dialog_1" class="bl_dialog">
<a href="#slide06" id="close"><button>×</button></a>
<div>
<p>ダイアログボックスの説明文が入ります。</p>

<a href="#form" id="closeDialog"><button id="closeDialog">閉じる</button></a>
</div>
</dialog>
</div>

<div id="slide07">
<div class="item"><img class="job_img" src="assets/images/7.webp" alt=""></div>

<div class="bl_button_inner">
<button id="showDialog" class="js_dialog_open el_button" data-dialog="#js_dialog_2">dialog2を開く</button>
</div>
<dialog id="js_dialog_2" class="bl_dialog">
<a href="#slide06" id="close"><button>×</button></a>
<div>
<p>ダイアログボックスの説明文が入ります。02</p>

<a href="#form" id="closeDialog"><button id="closeDialog">閉じる</button></a>
</div>
</dialog>

</div>

```
JS
const dialog = document.querySelector("dialog");

const showButton = document.querySelector("#showDialog");
showButton.addEventListener("click", () => {
dialog.showModal(); // モーダルダイアログを開く
});

const button = document.querySelector("#close","#closeDialog");
button.addEventListener("click", () => {
dialog.close(); // dialog要素を閉じる
})

const closeButton = document.querySelector("#closeDialog");
closeButton.addEventListener("click", () => {
dialog.close(); // モーダルダイアログを閉じる
});

この場合どの辺りに原因がありそうでしょうか？

[yus]

追記いただきありがとうございます！こちらも試してみます！

[yus]

問題が解決しました！

新しく追加したaタグの「.modal-button」で、
Remodal.min.jsで反映されていた「.remodal-wrapper」と「.remodal-overlay」にJSで「display:none」を書いたら無事実装できました！

-------------------
$(function(){
$('.modal-button').on('click', function(){
$('.remodal-wrapper').css({
'display': 'none'
});
});

});

$('.modal-button').on('click', function(){
$('.remodal-overlay').css({
'display': 'none'
});
});

-------------------

ご回答いただきありがとうございます！