使用 Twitter Bootstrap 在模式/对话框中确认删除? [英] Confirm deletion in modal / dialog using Twitter Bootstrap?

查看:40
本文介绍了使用 Twitter Bootstrap 在模式/对话框中确认删除?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个与数据库行相关联的行的 HTML 表.我想为每一行设置一个删除行"链接,但我想事先与用户确认.

有没有办法使用 Twitter Bootstrap 模态对话框来做到这一点?

解决方案

GET recipe

对于此任务,您可以使用已经可用的插件和引导程序扩展.或者,您可以使用 3 行代码制作自己的确认弹出窗口.看看吧.

假设我们有这个链接(注意 data-href 而不是 href)或我们想要删除确认的按钮:

<a href="#" data-href="delete.php?id=23" data-toggle="modal" data-target="#confirm-delete">删除记录#23</a><button class="btn btn-default" data-href="/delete.php?id=54" data-toggle="modal" data-target="#confirm-delete">删除记录 #54

此处 #confirm-delete 指向 HTML 中的模态弹出 div.它应该有一个确定"按钮,配置如下:

<div class="modalfade" 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 class="modal-body">...

<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">取消</button><a class="btn btn-danger btn-ok">删除</a>

现在您只需要这个小小的 javascript 即可确认删除操作:

$('#confirm-delete').on('show.bs.modal', function(e) {$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));});

So on show.bs.modal 事件删除按钮 href 设置为具有相应记录 id 的 URL.

演示: http://plnkr.co/edit/NePR0BQf3VmKtuMmhVR7?p=预览

<小时>

发布配方

我意识到在某些情况下可能需要执行 POST 或 DELETE 请求而不是 GET.它仍然很简单,没有太多代码.用这种方法看看下面的演示:

//将单击绑定到弹出窗口中的确定按钮$('#confirm-delete').on('click', '.btn-ok', function(e) {var $modalDiv = $(e.delegateTarget);var id = $(this).data('recordId');$modalDiv.addClass('加载');$.post('/api/record/' + id).then(function() {$modalDiv.modal('hide').removeClass('loading');});});//绑定到模态打开以设置用于发出请求的必要数据属性$('#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);});

//将单击绑定到弹出窗口中的确定按钮$('#confirm-delete').on('click', '.btn-ok', function(e) {var $modalDiv = $(e.delegateTarget);var id = $(this).data('recordId');$modalDiv.addClass('加载');设置超时(功能(){$modalDiv.modal('hide').removeClass('loading');}, 1000);//实际上会是这样的//$modalDiv.addClass('loading');//$.post('/api/record/' + id).then(function() {//$modalDiv.modal('hide').removeClass('loading');//});});//绑定到模态打开以设置用于发出请求的必要数据属性$('#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 {内容:'加载中...';文本对齐:居中;行高:155px;字体大小:20px;背景:rgba(0, 0, 0, .8);位置:绝对;顶部:55px;底部:0;左:0;右:0;颜色:#EEE;z-索引:1000;}





        
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆