我有一个HTML表的行绑定到数据库行。我希望每行都有一个“删除行”链接,但我想事先与用户确认。
有没有办法使用Twitter引导模式对话框来做到这一点?
我有一个HTML表的行绑定到数据库行。我希望每行都有一个“删除行”链接,但我想事先与用户确认。
有没有办法使用Twitter引导模式对话框来做到这一点?
当前回答
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>
其他回答
这是我的确认框“jquery组件”引导 在你的代码中使用这个:
function ConfirmBox({title,message,result}){
let confirm = $(`
<div class="modal fade" tabindex="-1" id="confirmBox" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header" style="text-align:center">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modalLabelSmall">${title}</h4>
</div>
<div class="modal-body">
${message}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default confirmButton">sure</button>
</div>
</div>
</div>
</div>
`);
//append confirm box to the DOM
$("body").append(confirm);
confirm.modal();
//handlers
confirm.find("button.confirmButton").one("click",function(){
result(true);
confirm.modal("hide");
});
confirm.find("button.close").one("click",function(){
result(false);
confirm.modal("hide");
})
//remove modal after hiding it
confirm.one('hidden.bs.modal', function () {
confirm.remove();
});
}
当涉及到一个相关的大项目时,我们可能需要一些可重复使用的东西。这是我在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等,以支持任何请求。
如果你想用最简单的快捷方式,你可以用这个插件。
但是这个插件是一个使用Bootstrap Modal的替代实现。真正的Bootstrap实现也很容易,所以我不喜欢使用这个插件,因为它会在页面中添加多余的JS内容,这会减慢页面加载时间。
Idea
我喜欢用这种方式来实现它
如果用户单击按钮从列表中删除一个项目,那么JS调用将把项目ID(或任何更重要的数据)放在模态的表单中。 然后在弹出窗口中,会有2个确认按钮。 Yes将提交表单(使用ajax或直接提交表单) 不,会忽略情态动词
代码将像这样(使用Bootstrap)-
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { //Say - $('p').get(0).id - this delete item id $("#delete_item_id").val( $('p').get(0).id ); $('#delete_confirmation_modal').modal('show'); }); }); </script> <p id="1">This is a item to delete.</p> <button type="button" class="btn btn-danger">Delete</button> <!-- Delete Modal content--> <div class="modal fade" id="delete_confirmation_modal" role="dialog" style="display: none;"> <div class="modal-dialog" style="margin-top: 260.5px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Do you really want to delete this Category?</h4> </div> <form role="form" method="post" action="category_delete" id="delete_data"> <input type="hidden" id="delete_item_id" name="id" value="12"> <div class="modal-footer"> <button type="submit" class="btn btn-danger">Yes</button> <button type="button" class="btn btn-primary" data-dismiss="modal">No</button> </div> </form> </div> </div> </div>
你应该根据你的要求改变表单动作。
快乐编码:)
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。
帮了我,也许也能帮到别人。
我意识到这是一个非常古老的问题,但自从我今天想知道一个更有效的方法来处理引导情态动词。我做了一些研究,发现了一些比上面显示的解决方案更好的方法,可以在这个链接中找到:
http://www.petefreitag.com/item/809.cfm
首先加载jquery
$(document).ready(function() {
$('a[data-confirm]').click(function(ev) {
var href = $(this).attr('href');
if (!$('#dataConfirmModal').length) {
$('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">Please Confirm</h3></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">OK</a></div></div>');
}
$('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
$('#dataConfirmOK').attr('href', href);
$('#dataConfirmModal').modal({show:true});
return false;
});
});
然后向href询问任何问题/确认即可:
<a href="/any/url/delete.php?ref=ID" data-confirm="Are you sure you want to delete?">Delete</a>
通过这种方式,确认模式更加通用,因此可以很容易地在网站的其他部分重复使用。