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。

Answer 2

最终使用了解决方案I found here，该解决方案使用锚点而不是按钮...它已有数年历史，但最适合我的情况

<div class="text-center mb-2"><a role="button" style="color:white" 
class="btn btn-secondary btn-sm custom"  data-toggle="modal" data-target="#MyModal"</a></div>-->