title: Modal focus highlight remains on element after closing modal window
body: <p>I have a modal set up, using Bootstrap, which is working just fine.  The modal brings up some text and an image.  When I hover on the modal element, a <code>button</code>,  there is a nice blue highlight that pops up, I'd like to keep that.  The issue is, when I close the modal window the blue highlight stays on the <code>button</code>,  I'd like to get rid of this.  </p>
  
  <p>I thought this CSS...</p>
  
  <pre><code>.modal-open .modal,
  .btn:focus{
      outline: none !important;
  }
  </code></pre>
  
  <p>...would remove the highlight, but it I'm still left with the blue highlight after I close the modal.  The following is the code for the modal...</p>
  
  <pre><code>&lt;button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"&gt;&lt;img  src='http://lorempixel.com/g/400/200'&gt;&lt;/button&gt;
  &lt;!-- Modal --&gt;
  &lt;div id="myModal" class="modal fade" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;!-- Modal content--&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Some Title&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;p&gt;Some text about something, Some text about something, Some text about something.&lt;/p&gt;
          &lt;a href='http://codepen.io'&gt;&lt;img  src='http://lorempixel.com/g/400/200'&gt;&lt;/a&gt;
        &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;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance for any assistance.</p>