获取食谱

对于此任务，您可以使用已经可用的插件和引导扩展。 或者，您只需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。它应该有一个这样配置的“确定”按钮：

<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 或 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 的这个问题时所做的代码的原始版本。

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