title: Bootstrap Modal - How to Return True if Yes Button is Clicked - Customized Confirm
body: <p>Okay, I've spent whole day reading Q&amp;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.</p>
  
  <p>Example:</p>
  
  <p><code>&lt;a href="remove.php?id=3" onclick="return custom_confirm('Are you sure you want to remove this?');" /&gt;</code></p>
  
  <p>and my custom confirm function is:</p>
  
  <pre><code>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...
  }
  </code></pre>
  
  <p>My modal is here:</p>
  
  <pre><code>&lt;!--  modal: custom confirmation  --&gt;
  &lt;div class="modal fade text-left" id="modal-custom-confirmation" tabindex="-1" role="dialog" aria-labelledby="modal-help-title"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
          &lt;strong class="modal-title" id="modal-help-title"&gt;Confirm&lt;/strong&gt;
        &lt;/div&gt;&lt;!--  /.modal-header  --&gt;
        &lt;div class="modal-body"&gt;
          &lt;p id="modal-help-text"&gt;&lt;/p&gt;
        &lt;/div&gt;&lt;!--  /.modal-body  --&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-success"&gt;Yes&lt;/button&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;No&lt;/button&gt;
        &lt;/div&gt;&lt;!--  /.modal-footer  --&gt;
      &lt;/div&gt;&lt;!--  /.modal-content  --&gt;
    &lt;/div&gt;&lt;!--  /.modal-dialog  --&gt;
  &lt;/div&gt;&lt;!--  /.modal  --&gt;
  </code></pre>