在模态 window 关闭后从 link 移除 :focus 状态

Question

我想从 link 中删除 :focus 状态，一旦模态关闭，它就会打开一个模态 window。目前，看起来正常的 Bootstrap 行为是 link 保持焦点，直到用户单击页面上的其他地方。我试过了；

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

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

})

似乎没有按我的意愿行事。我尝试输入一条警报消息，当警报打开时，焦点确实消失了，但是 returns 一旦警报关闭。非常感谢任何想法或帮助。

<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);
});

它使用对话框关闭时由 bootstrap 触发的事件。如果你不设置超时，link 会再次获得焦点（不确定为什么，但我猜焦点会在事件触发后立即设置到 link ......无论如何） .

在模态 window 关闭后从 link 移除 :focus 状态

Removing the :focus state from a link after modal window closes

jquery

twitter-bootstrap

bootstrap-modal