Css 关闭模态窗口后，模态焦点高亮显示仍保留在图元上

我有一个模式设置，使用引导，这是工作得很好。模态显示一些文本和图像。当我将鼠标悬停在模态元素上，一个

按钮

，会弹出一个漂亮的蓝色突出显示，我想保留它。问题是，当我关闭模式窗口时，

按钮

上的蓝色突出显示仍保持不变，我想消除这个问题

我以为这个CSS

.modal-open .modal,
.btn:focus{
    outline: none !important;
}

…将删除高光，但在关闭模式后，仍保留蓝色高光。以下是模式的代码

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"><img  src='http://lorempixel.com/g/400/200'></button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Some Title</h4>
      </div>
      <div class="modal-body">
        <p>Some text about something, Some text about something, Some text about something.</p>
        <a href='http://codepen.io'><img  src='http://lorempixel.com/g/400/200'></a>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

&时代；
一些头衔
一些关于某事的文字，一些关于某事的文字，一些关于某事的文字

接近

提前感谢您的帮助。

尝试使用此功能

$('#myModal').on('shown.bs.modal', function(e){
  $('#myModaltrigger').one('focus', function(e){$(this).blur();});
});

---

这是设计的，对于可访问性很重要。在结束时，情态动词应该将焦点返回到启动元素。如果按钮无法恢复焦点，则会破坏键盘/选项卡的可访问性。请参考这个

如果您想删除辉光或蓝色“highlight”，我建议在模式显示/隐藏上切换一个额外的CSS类。例如：

<button id="openButton" type="button" class="btn btn-info btn-lg btn-no-highlight" data-toggle="modal" data-target="#myModal"><img src='http://lorempixel.com/g/400/200'></button>

$(function(){  
  $('#myModal').on('hidden.bs.modal', function (e) {
    $('#openButton').toggleClass('btn-no-highlight');
  });
  $('#myModal').on('shown.bs.modal', function (e) {
    $('#openButton').toggleClass('btn-no-highlight');
  });
});

.btn.btn-no-highlight {
  background-color: #5bc0de;
  border-color: #46b8da;
  outline: none !important;
}

$（函数（）{
$（'#myModal'）.on（'hidden.bs.modal'，函数（e）{
$（“#openButton”）.toggleClass（'btn-no-highlight'）；
});
$（'#myModal'）.on（'show.bs.modal'，函数（e）{
$（“#openButton”）.toggleClass（'btn-no-highlight'）；
});
});
.btn.btn-no-highlight{
背景色：#5bc0de；
边框颜色：#46b8da；
大纲：无！重要；
}

---

我创建了一个提琴来演示这一点：

我认为您正在寻找伪类

：active

，而不是

：focus

，这是我首先尝试的，仍然有突出显示…这可能也会起作用，但会破坏可访问性