jquery - Bootstrap 4 - 打开模态的按钮在模态关闭后仍然突出显示/单击

Question

我正在使用下面的按钮打开模式

但在我关闭模式后，它似乎仍然突出显示/单击阴影。我以为我可以简单地使用模态事件处理程序来纠正这个问题......

$('#MyModal').on('hide.bs.modal', function() {
  $(".btn-secondary").blur();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<div class="text-center mb-2">
<button type="button" class="btn btn-secondary btn-sm custom" data-toggle="modal" data-target="#MyModal"> 
Button
</button></div>

模糊功能适用于不打开模式但对打开模式的按钮没有影响的测试按钮。如何让按钮 (.btn-secondary) 不再突出显示/单击？？？

Answer 1

应用以下样式:

.btn-secondary:focus {
    outline: none !important;
    box-shadow: none;
}

请注意，这将适用于类为 .btn-secondary 的所有按钮(这显然是一个引导类)。如果您只想将样式应用于特定按钮，请使用唯一的类或 ID。