I am currently utilizing the button below to trigger the opening of a modal window
However, upon closing the modal, it seems to maintain a highlighted or clicked appearance with a shadow effect. Initially, I assumed I could address this issue by implementing a modal event handler...
$('#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>The blur function works successfully on a test button that does not trigger the modal, yet it does not affect the buttons responsible for opening the modal. How can I ensure that the buttons with the class (.btn-secondary) do not retain the highlighted or clicked appearance after use???