我有一个按钮可以切换 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">×</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();
});
});
你们知道如何避免模态窗口关闭时焦点在切换按钮上吗?