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

Mircea 发表于 Dev

MIRC

我有一个按钮可以切换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();
    });
 });

你们知道有什么方法可以防止模式关闭时将注意力集中在切换按钮上吗？

戴维

根据Bootstrap文档，您需要指定触发工具提示的原因。选项包括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>

小提琴示例：http : //jsfiddle.net/6t3kxhLb/1/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。