【Rails】ポップアップ(確認ダイアログ)を表示する

こんにちは。

最近モンスターを飲み始めてから、目覚めが悪くなりました。

どうもハチマキです。

はじめに

ポップアップを表示する際にどうやって表示するんだろ？と思ったため、その方法について今回書いていきたいと思います。

▽イメージはこちら。

実装前は、jquery(JS)を駆使して実装していくのか？なんて思っておりましたが、
確認ダイアログを使えば、簡易的なものがいとも簡単に出来ました。

では早速行きましょう！

本日の概要 : ポップアップ(確認ダイアログ)を表示する

事象

削除する際や変更する際に、確認用のポップアップみたいなものを表示したいけど、一から作るの？なんか定義するの？どうやってやるんや。。？

表示方法

・link_toの場合（上記イメージ図）
= link_to "投稿", ~~_path, data: { confirm: 'そこに愛はあるんか？'}, class: "btn btn-lg btn-primary"

・form_forの場合
= form_for(@user, method: :PUT) do |f|
　=  f.submit '更新', data: { confirm: 'そこに愛はあるんか？'}

どちらも同様に追記するだけで、確認ダイアログが表示されるようになります。
※「confirm: ~ 」オプションは非推薦となって、「data: ~ 」記述に変わったみたいです。

補足

確認ダイアログのデフォルトは非常に簡易的です。
Bootstrapを利用してモーダルウィンドウ風に表示にしてくれるgemがありますので、ぜひこちらも試してみてはいかがでしょうか。

▽こちらの記事を参考にされていただきました。
data: {confirm: }の確認ダイアログをいい感じにする【Ruby on Rails】 | FuchiAz.com

同様に簡単に出来ます！

参考資料

フォームのsubmitで確認ダイアログを表示する - paranitips
<DAY170> data-confirm-modal'を使用したダイアログのデザイン変更 - yujiroのプログラミング

• • • • • • • • • • • • • • • • • • • • • • -

日々勉強です。

以上、ハチマキでした。