Javascript show modal with callback

Question

Trying to have a delete confirm modal with a javascript function callback and passing the variable key. The .click doesn't seem to pick up the button within the modal.

<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;
            });
        }
    });
}

here's an experimental native option without jquery which only works in chrome and opera: http://stackoverflow.com/questions/43183930/how-to-use-showmodal-to-completely-block-content-outside-as-promised — cregox, Apr 03 '17 at 13:29

score 0 · Answer 1 · answered Jan 21 '16 at 02:58

I have used this in the past and it works ok

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

here is an example of the 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');
});

Javascript show modal with callback

1 Answers1