Bootstrap4: Data-Confirm-Modal, with Rails and remote links

This is an example for data-confirm-modal usage without Rails and data attributes.

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/jquery-ujs/src/rails.js"></script>
<script src="https://sindro.me/~vjt/data-confirm-modal/vendor/assets/javascripts/data-confirm-modal.js"></script>
<div class="jumbotron">
<a
  id="foo"
  class="btn btn-primary btn-lg"
  data-confirm="This will navigate to a site"
  href="https://example.com/">
  Click me
</a>
</div>

JavaScript

$(function() {
  $('#foo').click(function(event) {
    var modal = $(this).confirmModal();
 
    if (!modal.is(':visible')) {
      event.preventDefault();
    }
  });
});