<section class="container">
  <h1>Autofocus Bootstrap Modal Close Button</h1>
  <p>When the Bootstrap 3.0 modal is fired auto-focus the close button for better accessibility. #a11y</p>
  <a class="btn btn-success" data-toggle="modal" data-target="#example-modal" id="example-modal--label" href="#">Trigger Modal</a>
</section>

<div class="modal fade" role="dialog" aria-labelledby="example-modal--label" aria-hidden="true" id="example-modal" tabindex="-1" >
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <header class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close Modal</span></button>
        <h4 class="modal-title" id="mySmallModalLabel">Header goes here.</h4>
      </header>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus voluptates blanditiis numquam et accusamus earum dolorum, quisquam quia harum laudantium? Ipsam consequuntur esse eos numquam quaerat ipsa provident quidem aperiam!</p>
      </div>
    </div>
  </div>
</div><!-- .modal -->

/*

Bootstrap offers an event called "shown.bs.modal" which is helpful for targeting the close button after the modal has been launched.


https://getbootstrap.com/javascript/#modals-usage

*/

var $exampleModal = $("#example-modal"),
    $exampleModalClose = $(".modal-header button");

    $exampleModal.on("shown.bs.modal", function() {
        document.activeElement.blur();
        $exampleModalClose.focus();
    });