模式窗口关闭后从链接中删除 :focus 状态

Question

我想在模式关闭后从打开模式窗口的链接中删除 :focus 状态。目前，似乎正常的引导行为是链接保持焦点，直到用户单击页面上的其他位置。我试过了；

$('.modal').on('hidden.bs.modal', function () {

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

})

似乎没有做我想做的事。我尝试发送一条警报消息，当警报打开时，焦点确实消失了，但警报关闭后立即返回。非常感谢任何想法或帮助。

<div class="container">
  <div class="row">

    <p><a href="#" data-toggle="modal" data-target="#myModal" class="main-body">Click to Enlarge</a></p>

  </div>

</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
  <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    Some stuff goes here to read
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>
</div>
</div>

[jsFiddle] (https://jsfiddle.net/jhottle/a5gcyfn5/10/)

Answer 1

将此添加到您的 Javascript：

$('#myModal').on('hidden.bs.modal', function () {
   setTimeout(function(){$('[data-target="#myModal"]').blur();}, 10);
});

当对话框关闭时，它使用引导程序触发的事件。如果您不设置超时，则链接会再次获得焦点（不完全确定原因，但我猜焦点在事件触发后立即设置为链接......无论如何）。