带有回调的 Javascript 显示模式

Question

尝试使用 javascript 函数回调并传递变量键来创建删除确认模式。 .click 似乎没有拾取模式中的按钮。

<div class="modal fade" id="confirm_delete_escalation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" 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">&times;</button>
              <h4 class="modal-title" id="myModalLabel2">Confirm Delete</h4>
          </div>

          <div class="modal-body">
              <p>Are you sure?</p>
              <p class="debug-url"></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>

function confirm(message, key, callback) {
    var modalWindow = document.getElementById("confirm_delete_escalation");
    $(modalWindow).modal({
        onShow: function (dialog) {
            var modal = this;
            $(".message", dialog.data[0]).append(message);
            $(".btn-ok", dialog.data[0]).click(function () {
                modal.close(); $.modal.close();
                callback(key);
                return true;
            });
        }
    });
}

Answer 1

我以前用过这个，效果不错

  <div class="container">
 <a href="#" class="confirm-delete" data-id="1">Delete</a><br>
 </div>

 <div id="myModal" class="modal hide">
<div class="modal-header">
    <a href="#" data-dismiss="modal" aria-hidden="true" class="close">×</a>
     <h3>Delete</h3>
</div>
<div class="modal-body">
    <p>You are about to delete.</p>
    <p>Do you want to proceed?</p>
</div>
<div class="modal-footer">
  <a href="#" id="btnYes" class="btn danger">Yes</a>
  <a href="#" data-dismiss="modal" aria-hidden="true" class="btn secondary">No</a>
</div>

这里是一个JS的例子

 $('#myModal').on('show', function() {
 var id = $(this).data('id'),
 removeBtn = $(this).find('.danger');
 })

 $('.confirm-delete').on('click', function(e) {
  e.preventDefault();

   var id = $(this).data('id');
   $('#myModal').data('id', id).modal('show');
 });

$('#btnYes').click(function() {
// handle deletion here
var id = $('#myModal').data('id');
$('[data-id='+id+']').remove();
$('#myModal').modal('hide');
});