Bootstrap Modal - How to Return True if Yes Button is Clicked - Customized Confirm

Viewed 16826

Okay, I've spent whole day reading Q&A but still couldn't get it done. I needed to create a customized confirm() wherein instead of the default dialog, I use bootstrap modal to return true if user clicks Yes, return false for No.

Example:

<a href="remove.php?id=3" onclick="return custom_confirm('Are you sure you want to remove this?');" />

and my custom confirm function is:

function custom_confirm(message) {
  //  put message into the body of modal
  $('#modal-custom-confirmation').on('show.bs.modal', function (event) {
  //  store current modal reference
    var modal = $(this);

    //  update modal body help text
    modal.find('.modal-body #modal-help-text').text(message);
  });

  //  show modal ringer custom confirmation
  $('#modal-custom-confirmation').modal('show');

  //  if Yes button is clicked, return true
  //  if No  button is clicked,  return false
  //  logic here...
}

My modal is here:

<!--  modal: custom confirmation  -->
<div class="modal fade text-left" id="modal-custom-confirmation" tabindex="-1" role="dialog" aria-labelledby="modal-help-title">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong class="modal-title" id="modal-help-title">Confirm</strong>
      </div><!--  /.modal-header  -->
      <div class="modal-body">
        <p id="modal-help-text"></p>
      </div><!--  /.modal-body  -->
      <div class="modal-footer">
        <button type="button" class="btn btn-success">Yes</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
      </div><!--  /.modal-footer  -->
    </div><!--  /.modal-content  -->
  </div><!--  /.modal-dialog  -->
</div><!--  /.modal  -->
2 Answers
Related