リンククリック(ページ遷移)後にモーダルを表示させたい

Question

実現したいこと

削除リンクをクリックしページ遷移後に「削除しました」というようなモーダルを表示させたい。

前提

jQueryを使って実装しようとしています。
初心者ですが実装方法が分からず苦戦しています。ご教示いただけると嬉しいです。

該当のソースコード

edit.html.erb

<div class="modal">
  <div class="modal_bg"></div> <%# モーダルウィンドウの黒い部分　%>
  <div class="modal_window"><%# window部分　%>
    <h3>モーダルウィンドウ</h3>
    <div class="button close">CLOSE</div><%# window閉じるボタン　%>
  </div><%# window部分　%>
</div>

edit.js

$(document).on('turbolinks:load', function(){
  // #modal-openがクリックされたらモーダルウィンドウを表示
  $(".button").on('click',function(){
    $(window).on('load',function () { 
      // #modal-overlayをフェードイン(display: none; → block;)させる
      $(".modal").fadeIn();
    });
  });

試したこと

clickイベントのみだとページ遷移後にモーダルが消えてしまい、loadイベントとclickを掛け合わせて実装できないか試しましたが反応せず困っています。

Comments

[退会済みユーザー]

alert で良いのでは？　ダメならその理由を教えてください。

[退会済みユーザー]

alert ではダメということでしたら jQuery UI の Dialog とか Bootstrap の Modal とかはいかが？

Dialog
https://jqueryui.com/dialog/

Modal (モーダル)
https://getbootstrap.jp/docs/5.0/components/modal/

Answer 1

遷移せずにAPI経由でXHR(ajax/fetch)で処理して結果を受けてアラートをだせばよいのでは？

参考

<script>
document.addEventListener('click',({target})=>{
  if(target.matches('#btn')){
    dlg_input.showModal();
  }
});
document.addEventListener('close',({target})=>{
  if(target.matches('#dlg_input')){
    if(dlg_input.returnValue=="送信"){
      fetch(api).then(res=>res.text()).then(data=>{
        if(data=="success"){
          dlg_del.showModal();
        }
      });
    }
  }
},true);
</script>
<dialog id="dlg_input">
<form method="dialog">
<input name="id" value="123">
<input type="submit" value="送信">
<input type="submit" value="キャンセル">
</form>
</dialog>
<dialog id="dlg_del">
<form method="dialog">
削除しました
<input type="submit" value="OK">
</form>
</dialog>
<input type="button" value="modal" id="btn">

Comments

[r0127]

ありがとうございます！こちら参考に試してみます。