我有一个HTML表的行绑定到数据库行。我希望每行都有一个“删除行”链接，但我想事先与用户确认。
有没有办法使用Twitter引导模式对话框来做到这一点?
当前回答
当涉及到一个相关的大项目时，我们可能需要一些可重复使用的东西。这是我在SO的帮助下得到的东西。
confirmDelete.jsp
<!-- Modal Dialog -->
<div class="modal fade" id="confirmDelete" role="dialog" aria-labelledby="confirmDeleteLabel"
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">Delete Parmanently</h4>
</div>
<div class="modal-body" style="height: 75px">
<p>Are you sure about this ?</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" id="confirm-delete-ok">Ok
</button>
</div>
</div>
</div>
<script type="text/javascript">
var url_for_deletion = "#";
var success_redirect = window.location.href;
$('#confirmDelete').on('show.bs.modal', function (e) {
var message = $(e.relatedTarget).attr('data-message');
$(this).find('.modal-body p').text(message);
var title = $(e.relatedTarget).attr('data-title');
$(this).find('.modal-title').text(title);
if (typeof $(e.relatedTarget).attr('data-url') != 'undefined') {
url_for_deletion = $(e.relatedTarget).attr('data-url');
}
if (typeof $(e.relatedTarget).attr('data-success-url') != 'undefined') {
success_redirect = $(e.relatedTarget).attr('data-success-url');
}
});
<!-- Form confirm (yes/ok) handler, submits form -->
$('#confirmDelete').find('.modal-footer #confirm-delete-ok').on('click', function () {
$.ajax({
method: "delete",
url: url_for_deletion,
}).success(function (data) {
window.location.href = success_redirect;
}).fail(function (error) {
console.log(error);
});
$('#confirmDelete').modal('hide');
return false;
});
<script/>
reusingPage.jsp
<a href="#" class="table-link danger"
data-toggle="modal"
data-target="#confirmDelete"
data-title="Delete Something"
data-message="Are you sure you want to inactivate this something?"
data-url="client/32"
id="delete-client-32">
</a>
<!-- jQuery should come before this -->
<%@ include file="../some/path/confirmDelete.jsp" %>
注意:这使用http删除方法删除请求，你可以改变它从javascript或，可以发送它使用数据属性在数据标题或数据url等，以支持任何请求。
其他回答
我可以很容易地使用bootbox.js库处理这种类型的任务。首先，你需要包括引导框JS文件。然后在你的事件处理函数中简单地写以下代码:
bootbox.confirm("Are you sure to want to delete , function(result) {
//here result will be true
// delete process code goes here
});
官方引导盒js 网站
http://bootboxjs.com/ - Bootstrap 3.0.0的最新作品
最简单的例子:
bootbox.alert("Hello world!");
来自网站:
该库公开了三种用于模拟原生JavaScript等价物的方法。它们确切的方法签名是灵活的，因为每个方法都可以接受各种参数来定制标签和指定默认值，但它们通常是这样被称为:
bootbox.alert(message, callback)
bootbox.prompt(message, callback)
bootbox.confirm(message, callback)
下面是运行中的代码片段(点击下面的“运行代码片段”):
$(function() { bootbox.alert("Hello world!"); }); <!-- required includes --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <!-- bootbox.js at 4.4.0 --> <script src="https://rawgit.com/makeusabrew/bootbox/f3a04a57877cab071738de558581fbc91812dce9/bootbox.js"></script>
当涉及到一个相关的大项目时，我们可能需要一些可重复使用的东西。这是我在SO的帮助下得到的东西。
confirmDelete.jsp
<!-- Modal Dialog -->
<div class="modal fade" id="confirmDelete" role="dialog" aria-labelledby="confirmDeleteLabel"
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">Delete Parmanently</h4>
</div>
<div class="modal-body" style="height: 75px">
<p>Are you sure about this ?</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" id="confirm-delete-ok">Ok
</button>
</div>
</div>
</div>
<script type="text/javascript">
var url_for_deletion = "#";
var success_redirect = window.location.href;
$('#confirmDelete').on('show.bs.modal', function (e) {
var message = $(e.relatedTarget).attr('data-message');
$(this).find('.modal-body p').text(message);
var title = $(e.relatedTarget).attr('data-title');
$(this).find('.modal-title').text(title);
if (typeof $(e.relatedTarget).attr('data-url') != 'undefined') {
url_for_deletion = $(e.relatedTarget).attr('data-url');
}
if (typeof $(e.relatedTarget).attr('data-success-url') != 'undefined') {
success_redirect = $(e.relatedTarget).attr('data-success-url');
}
});
<!-- Form confirm (yes/ok) handler, submits form -->
$('#confirmDelete').find('.modal-footer #confirm-delete-ok').on('click', function () {
$.ajax({
method: "delete",
url: url_for_deletion,
}).success(function (data) {
window.location.href = success_redirect;
}).fail(function (error) {
console.log(error);
});
$('#confirmDelete').modal('hide');
return false;
});
<script/>
reusingPage.jsp
<a href="#" class="table-link danger"
data-toggle="modal"
data-target="#confirmDelete"
data-title="Delete Something"
data-message="Are you sure you want to inactivate this something?"
data-url="client/32"
id="delete-client-32">
</a>
<!-- jQuery should come before this -->
<%@ include file="../some/path/confirmDelete.jsp" %>
注意:这使用http删除方法删除请求，你可以改变它从javascript或，可以发送它使用数据属性在数据标题或数据url等，以支持任何请求。
POST配方导航到目标页面和可重用的刀片文件
Dfsq的回答非常好。我对它做了一些修改，以适应我的需求:我实际上需要一个模式，在点击之后，用户也会被导航到相应的页面。异步执行查询并不总是需要的。
使用Blade我创建了文件资源/views/includes/confirmation_modal.blade.php:
<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog" aria-labelledby="confirmation-modal-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>{{ $headerText }}</h4>
</div>
<div class="modal-body">
{{ $bodyText }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<form action="" method="POST" style="display:inline">
{{ method_field($verb) }}
{{ csrf_field() }}
<input type="submit" class="btn btn-danger btn-ok" value="{{ $confirmButtonText }}" />
</form>
</div>
</div>
</div>
</div>
<script>
$('#confirmation-modal').on('show.bs.modal', function(e) {
href = $(e.relatedTarget).data('href');
// change href of button to corresponding target
$(this).find('form').attr('action', href);
});
</script>
现在，使用它很简单:
<a data-href="{{ route('data.destroy', ['id' => $data->id]) }}" data-toggle="modal" data-target="#confirmation-modal" class="btn btn-sm btn-danger">Remove</a>
这里没有太多变化，模态可以像这样包含:
@include('includes.confirmation_modal', ['headerText' => 'Delete Data?', 'bodyText' => 'Do you really want to delete these data? This operation is irreversible.',
'confirmButtonText' => 'Remove Data', 'verb' => 'DELETE'])
只要把动词放在那里，它就会用到它。这样，也可以利用CSRF。
帮了我，也许也能帮到别人。
得到的配方
对于这个任务，您可以使用已经可用的插件和引导扩展。或者你也可以用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 event delete button上，href被设置为带有相应记录id的URL。
演示:http://plnkr.co/edit/NePR0BQf3VmKtuMmhVR7?p=preview
帖子食谱
我意识到在某些情况下可能需要执行POST或DELETE请求，而不是GET请求。它仍然很简单，没有太多的代码。看看下面使用这种方法的演示:
// 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="bootstrap-css@3.1.1" 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
这是我为Bootstrap 2.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));
});
演示:http://jsfiddle.net/MjmVr/1595/
推荐文章
- 改变引导输入焦点蓝色发光
- 如何获得一个键/值JavaScript对象的键
- 什么时候JavaScript是同步的?
- 在jQuery中取消<select>的最佳方法?
- jQuery的“输入”事件
- 错误"Uncaught SyntaxError:意外的标记与JSON.parse"
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- 在jQuery中的CSS类更改上触发事件
- jQuery日期/时间选择器
- 我如何预填充一个jQuery Datepicker文本框与今天的日期?
- jQuery添加必要的输入字段
- 如何使用Twitter的Bootstrap内联显示列表
- JavaScript错误(Uncaught SyntaxError:意外的输入结束)
- navigator。gelocation。getcurrentposition有时有效有时无效
