change js confirm to a twitter bootstrap modal

http://stackoverflow.com/questions/26199642/change-js-confirm-to-a-twitter-bootstrap-modal

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="confirm-label" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="confirm-label"></h4>
      </div>
      <div class="modal-body">
        <p class="message"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default dismiss" data-dismiss="modal"></button>
        <button type="button" class="btn btn-primary confirm" data-dismiss="modal"></button>
      </div>
    </div>
  </div>
</div>

JavaScript

(function ($) {
  $.fn.confirm = function (options) {
    var settings = $.extend({}, $.fn.confirm.defaults, options);

    return this.each(function () {
      var element = this;

      $('.modal-title', this).html(settings.title);
      $('.message', this).html(settings.message);
      $('.confirm', this).html(settings.confirm);
      $('.dismiss', this).html(settings.dismiss);

      $(this).on('click', '.confirm', function (event) {
        $(element).data('confirm', true);
      });

      $(this).on('hide.bs.modal', function (event) {
        if ($(this).data('confirm')) {
          $(this).trigger('confirm', event);
          $(this).removeData('confirm');
        } else {
          $(this).trigger('dismiss', event);
        }

        $(this).off('confirm dismiss');
      });

      $(this).modal('show');
    });
  };

  $.fn.confirm.defaults = {
    title: 'Modal title',
    message: 'One fine body&hellip;',
    confirm: 'OK',
    dismiss: 'Cancel'
  };
})(jQuery);

$('#confirm').confirm({
  title: 'Can I join you?',
  message: 'A SQL query goes into a bar, walks up to two tables and asks, &quot;Can I join you?&quot;',
  confirm: 'Yes, naturally',
  dismiss: 'No, but you can enjoy the view'
}).on({
  confirm: function () {
    console.log('confirm');
  },
  dismiss: function () {
    console.log('dismiss');
  }
});