Removing the :focus state from a link after modal window closes
<p>I want to remove the :focus state from links that open a modal window once the modal is closed. Currently, and what seems like normal Bootstrap behavior is that the link maintains the focus until user clicks elsewhere on the page. I've tried;</p>

<pre><code>$('.modal').on('hidden.bs.modal', function () {

  $('a').unbind('click', '.main-body');

})
</code></pre>

<p>Doesn't seem to do what I want. I tried throwing in an alert message, and while the alert is open the focus does go away but returns as soon as alert closes. Any ideas or help greatly appreciated.</p>

<pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;

    &lt;p&gt;&lt;a href="#" data-toggle="modal" data-target="#myModal" class="main-body"&gt;Click to Enlarge&lt;/a&gt;&lt;/p&gt;

  &lt;/div&gt;

&lt;/div&gt;

&lt;!-- Modal --&gt;
&lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&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;h4 class="modal-title" id="myModalLabel"&gt;Modal title&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
    Some stuff goes here to read
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
    &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
    &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>[jsFiddle] (<a href="https://jsfiddle.net/jhottle/a5gcyfn5/10/" rel="nofollow">https://jsfiddle.net/jhottle/a5gcyfn5/10/</a>)</p>