模态关闭后，如何防止焦点在 Bootstrap 模态的切换按钮上？

Question

我有一个按钮可以切换 Bootstrap 模式。按钮本身包裹在 div 中，因此悬停时会显示工具提示。

当我关闭模式时，按钮获得焦点并且工具提示显示时没有将鼠标悬停在元素上。

<span data-toggle="tooltip" data-placement="top" data-title="Tooltip">
    <button  data-toggle="modal" data-target="#modal">Toggle</button>
</span>

 <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal">&times;</button>
             </div>
             
             <div class="modal-body">
                 <p>lorem ispum dolor sit amet</p>
             </div>
             
             
             <div class="modal-footer">
                 <button type="button" class="btn btn-primary">Submit</button>
                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
             </div>
         </div>
     </div>
</div>

看看这里到底发生了什么：http://jsfiddle.net/6t3kxhLb/

到目前为止我能想出的唯一解决方法是在 hidden.bs.modal 事件触发时模糊按钮。但是我对结果不是很满意。

这是我的解决方法：

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

你们知道在模式关闭时防止焦点在切换按钮上的方法吗？

Answer 1

根据 Bootstrap documentation，您需要指定触发工具提示的内容。选项是 click、hover、focus 和 manual，而默认设置是 hover 和 focus。所以只需将 data-trigger="hover" 添加到您的元素中：

<span data-toggle="tooltip" data-placement="top" data-title="Tooltip" data-trigger="hover">
    <button  data-toggle="modal" data-target="#modal">Toggle</button>
</span>

示例 fiddle：http://jsfiddle.net/6t3kxhLb/1/

Answer 2

我会在一段时间后插话这个话题。我避免使用 Bootstraps 数据属性并使用 Jquery。我通过以下实现了这一目标...

// Use whatever to trigger the modal, in this case a class
// Get the modal trigger
var modalTriggerObj = $("body").find(".modal-trigger");

modalTriggerObj.on('click', function(e) {
  e.preventDefault();

  // Opens the modal
  $("#modal").modal();
  // Light up the modal trigger with css
  $(this).addClass('modal-on');

  // When the modal hides ...
  $("#modal").on('hide.bs.modal', function() {
    // Return the trigger to its default state
    modalTriggerObj.removeClass('modal-on');
  });
});

Answer 3

这是我使用的解决方案，效果很好：

$('.modal').on('hidden.bs.modal',function(event){
  event.stopImmediatePropagation();
});

模态关闭后，如何防止焦点在 Bootstrap 模态的切换按钮上？

How can I prevent the focus on the toggle button for a Bootstrap modal after the modal closes?

twitter-bootstrap

modal-dialog

tooltip

这是我的解决方法：