[解決済み】Twitter Bootstrapを使用したモーダル/ダイアログでの削除の確認?
質問
データベースの行に関連する行のHTMLテーブルを持っています。各行に"delete row"のリンクを設けたいのですが、事前にユーザーに確認したいのですが、可能でしょうか?
Twitter Bootstrapのモーダルダイアログを使って、これを実現する方法はないでしょうか?
どのように解決するのですか?
レシピをGETする
このタスクには、すでに利用可能なプラグインとブートストラップ拡張機能を使用できます。また、独自の確認用ポップアップは 3 行のコードです。調べてみてください。
このようなリンクがあるとします(注
data-href
の代わりに
href
) や、削除確認が必要なボタンがあります。
<a href="#" data-href="delete.php?id=23" data-toggle="modal" data-target="#confirm-delete">Delete record #23</a>
<button class="btn btn-default" data-href="/delete.php?id=54" data-toggle="modal" data-target="#confirm-delete">
Delete record #54
</button>
ここで
#confirm-delete
は、HTML 内のモーダルポップアップ div を指します。このように設定された "OK" ボタンがあるはずです。
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
...
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger btn-ok">Delete</a>
</div>
</div>
</div>
</div>
あとは、この小さなjavascriptで、削除アクションを確認できるようにするだけです。
$('#confirm-delete').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
});
そこで
show.bs.modal
イベント削除ボタン
href
には、対応するレコードIDのURLが設定されます。
デモです。 http://plnkr.co/edit/NePR0BQf3VmKtuMmhVR7?p=preview
レシピのPOST
場合によっては、GETではなくPOSTやDELETEリクエストを実行する必要があるかもしれないことを理解しています。それでも、あまり多くのコードを必要とせず、非常にシンプルです。この方法によるデモをご覧ください。
// Bind click to OK button within popup
$('#confirm-delete').on('click', '.btn-ok', function(e) {
var $modalDiv = $(e.delegateTarget);
var id = $(this).data('recordId');
$modalDiv.addClass('loading');
$.post('/api/record/' + id).then(function() {
$modalDiv.modal('hide').removeClass('loading');
});
});
// Bind to modal opening to set necessary data properties to be used to make request
$('#confirm-delete').on('show.bs.modal', function(e) {
var data = $(e.relatedTarget).data();
$('.title', this).text(data.recordTitle);
$('.btn-ok', this).data('recordId', data.recordId);
});
// Bind click to OK button within popup
$('#confirm-delete').on('click', '.btn-ok', function(e) {
var $modalDiv = $(e.delegateTarget);
var id = $(this).data('recordId');
$modalDiv.addClass('loading');
setTimeout(function() {
$modalDiv.modal('hide').removeClass('loading');
}, 1000);
// In reality would be something like this
// $modalDiv.addClass('loading');
// $.post('/api/record/' + id).then(function() {
// $modalDiv.modal('hide').removeClass('loading');
// });
});
// Bind to modal opening to set necessary data properties to be used to make request
$('#confirm-delete').on('show.bs.modal', function(e) {
var data = $(e.relatedTarget).data();
$('.title', this).text(data.recordTitle);
$('.btn-ok', this).data('recordId', data.recordId);
});
.modal.loading .modal-content:before {
content: 'Loading...';
text-align: center;
line-height: 155px;
font-size: 20px;
background: rgba(0, 0, 0, .8);
position: absolute;
top: 55px;
bottom: 0;
left: 0;
right: 0;
color: #EEE;
z-index: 1000;
}
<script data-require="jquery@*" data-semver="2.0.3" src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete <b><i class="title"></i></b> record, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok">Delete</button>
</div>
</div>
</div>
</div>
<a href="#" data-record-id="23" data-record-title="The first one" data-toggle="modal" data-target="#confirm-delete">
Delete "The first one", #23
</a>
<br />
<button class="btn btn-default" data-record-id="54" data-record-title="Something cool" data-toggle="modal" data-target="#confirm-delete">
Delete "Something cool", #54
</button>
デモの様子 http://plnkr.co/edit/V4GUuSueuuxiGr4L9LmG?p=preview
ブートストラップ2.3
Bootstrap2.3のモーダルについて、この質問に答えるときに作ったコードの原版を紹介します。
$('#modal').on('show', function() {
var id = $(this).data('id'),
removeBtn = $(this).find('.danger');
removeBtn.attr('href', removeBtn.attr('href').replace(/(&|\?)ref=\d*/, '$1ref=' + id));
});
関連
-
[解決済み] チェックボックスのオン/オフの切り替え
-
[解決済み] モバイル端末の検出にはどのような方法がありますか?
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] BootstrapのモーダルウィンドウをjQueryで開くには?
-
[解決済み] Bootstrapのモーダルが背景の下に表示される
-
[解決済み] Twitter Bootstrap Form File Element Upload Button(ファイルアップロードボタン
-
[解決済み] ブートストラップ・モーダルにデータを渡す
-
[解決済み] Twitter Bootstrapのモーダルウィンドウを閉じないようにする
-
[解決済み】Twitter bootstrapのリモートモーダルでは、毎回同じコンテンツが表示される
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] カルーセルで画像を中央に配置する方法
-
[解決済み] jQueryを使って入力が空かどうかをチェックする
-
[解決済み] jQueryは、すべてのテキストフィールドの値の合計を計算する
-
[解決済み] jQuery - 小数点以下2桁に丸め、その数値で計算する。
-
[解決済み] JWplayer 再生クリックでフルスクリーン表示
-
[解決済み] jQueryで小文字と大文字を使い分ける
-
[解決済み] jQuery - クラスの代わりにIDを追加する
-
[解決済み] jquery-rails」と「jquery-ui-rails」は、1つのプロジェクトで管理することができるのでしょうか?
-
[解決済み] jQueryで背景画像をアニメーションで変化させる
-
[解決済み] 3桁ごとの数字にカンマを追加