在模式

在模式

关注
发信
关注(28)粉丝(399)

使用 Twitter Bootstrap 在模式/对话框中确认删除?

本文介绍了使用 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；}
<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="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"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel">确认删除</h4>

<div class="modal-body"><p>您将要删除 <b><i class="title"></i></b>记录，这个过程是不可逆的.</p><p>您要继续吗?</p>

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

<a href="#" data-record-id="23" data-record-title="第一个" data-toggle="modal" data-target="#confirm-delete">删除第一个"，#23</a><br/><button class="btn btn-default" data-record-id="54" data-record-title="Something cool" data-toggle="modal" data-target="#confirm-delete">删除一些很酷的东西"，#54</button>

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

引导程序 2.3

这是我为 Bootstrap 2.3 modal 回答这个问题时制作的代码的原始版本.

$('#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/

I have an HTML table of rows tied to database rows. I'd like to have a "delete row" link for each row, but I would like to confirm with the user beforehand.

Is there any way to do this using the Twitter Bootstrap modal dialog?

解决方案

GET recipe

For this task you can use already available plugins and bootstrap extensions. Or you can make your own confirmation popup with just 3 lines of code. Check it out.

Say we have this links (note data-href instead of href) or buttons that we want to have delete confirmation for:

<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>

Here #confirm-delete points to a modal popup div in your HTML. It should have an "OK" button configured like this:

<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>

Now you only need this little javascript to make a delete action confirmable:

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

So on show.bs.modal event delete button href is set to URL with corresponding record id.

Demo: http://plnkr.co/edit/NePR0BQf3VmKtuMmhVR7?p=preview

POST recipe

I realize that in some cases there might be needed to perform POST or DELETE request rather then GET. It it still pretty simple without too much code. Take a look at the demo below with this approach:

// 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>

Demo: http://plnkr.co/edit/V4GUuSueuuxiGr4L9LmG?p=preview

Bootstrap 2.3

Here is an original version of the code I made when I was answering this question for Bootstrap 2.3 modal.

$('#modal').on('show', function() {
    var id = $(this).data('id'),
        removeBtn = $(this).find('.danger');
    removeBtn.attr('href', removeBtn.attr('href').replace(/(&|?)ref=d*/, '$1ref=' + id));
});

Demo: http://jsfiddle.net/MjmVr/1595/

这篇关于使用 Twitter Bootstrap 在模式/对话框中确认删除?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-22 14:25
Powered by LMLPHP ©2024 在模式 0.039049