关闭模态窗口后,模态焦点高亮显示在元素上

时间:2016-03-08 03:48:39

标签: css twitter-bootstrap button bootstrap-modal pseudo-class

我有一个模态设置,使用Bootstrap,它运行得很好。模态会调出一些文字和图像。当我将鼠标悬停在模态元素button上时,会弹出一个漂亮的蓝色高光,我想保留它。问题是,当我关闭模态窗口时,蓝色突出显示停留在button上,我想摆脱它。

我以为这个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>

提前感谢您的任何帮助。

2 个答案:

答案 0 :(得分:2)

尝试使用此

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

答案 1 :(得分:2)

这是设计使用,对可访问性很重要。在关闭时,模态应该将焦点返回到启动元素。如果按钮无法将焦点重新调整,则会破坏键盘/标签的可访问性。请参阅此github issue

如果你想要去除发光,或者蓝色&#34;突出显示&#34;我建议在模态show / hide上切换一个额外的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;
}

我创造了一个小提琴来证明这一点:https://jsfiddle.net/e61r4ba3/