バージョン
Bootstrap 4
概要
以下のケースを想定。
一覧表に「削除」ボタン(type=button)が複数あり、クリック時にBootstrap 4の確認ダイアログを表示して
「はい」なら選択した行のキーをsubmitする。
Bootstrap 4の確認ダイアログを出すだけなら公式サイトを。 getbootstrap.com
コード
■HTML
<button type="button" class="delete-confirm btn btn-success" value="A001" data-toggle="modal" data-target="#confirm-delete">削除</button> <button type="button" class="delete-confirm btn btn-success" value="A002" data-toggle="modal" data-target="#confirm-delete">削除</button> <button type="button" class="delete-confirm btn btn-success" value="A003" data-toggle="modal" data-target="#confirm-delete">削除</button> <!-- Modal --> <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">確認</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> 削除しますか? </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">いいえ</button> <button type="submit" class="btn btn-success" id="deletebtn" name="deletebtn" >はい</button> </div> </div> </div> </div>
<script> $('.delete-confirm').click(function(){ $('#deletebtn').val( $(this).val() ); }); </script>
Modal部分はほぼ公式のコピペだが、「はい」ボタンをtype=submitにしている。
該当のボタンをclassからクリックイベントを生成し、
キーを確認ダイアログの「はい」ボタンのvalueにセットしてsubmitする仕組みを作った。
- 作者: 掌田津耶乃
- 出版社/メーカー: 秀和システム
- 発売日: 2018/10/15
- メディア: Kindle版
- この商品を含むブログを見る