Bootstrap4: Data-Confirm-Modal without Rails and data attributes

This is an example for data-confirm-modal usage with direct JS invocation.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://sindro.me/~vjt/data-confirm-modal/vendor/assets/javascripts/data-confirm-modal.js"></script>
<div class="jumbotron">
  <p>
    <a id="foo" class="btn btn-primary btn-lg" href="https://www.example.com">
      Click me
    </a>
  </p>
  <p id="joke"></p>
</div>

JavaScript

var link = $('#foo');
link.on('click', function(event) {
  event.preventDefault();

  dataConfirmModal.confirm({
    title: 'Are you sure?',
    text: 'This will show a popup if canceled or display funny text if confirmed',
    commit: 'Yes do it',
    cancel: 'Not really',

    onConfirm: function() {
      $.getJSON('https://api.icndb.com/jokes/random').
      	success(function(data) {
          $('#joke').html(data.value.joke);
        }).
        error(function() {
          alert("aw! Something went wrong :-(")
        })
    },
    onCancel: function() {
      alert('OK, canceling!');
    }
  });
});