Как убрать фокус с кнопки после закрытия "altertify" модального подтверждения?

У меня есть кнопка с :hover а также :focus собственность css. При наведении на него цвет меняется на красный. Теперь, когда я нажимаю на него, появляется окно подтверждения оповещения, а затем я нажимаю ок или отменяю, цвет снова меняется на красный из-за :focus имущество. Как я могу отстегнуть :focus при нажатии на кнопку ОК или отмена.

<html>
<head>
    <script src="https://cdn.jsdelivr.net/alertifyjs/1.8.0/alertify.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/alertifyjs/1.8.0/css/alertify.min.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/alertifyjs/1.8.0/css/themes/default.min.css"/>

</head>

<style>
.btn-test:hover,.btn-test:focus{
background-color:red;
}
</style>

<body>


<button class="btn-test">Click Me</button>


</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
$(".btn-test").click(function(){

 alertify.confirm('Confirmation', 'You clicked', function () {
                //do nothing
            }
            , function () {
                //do nothing
            });

});
</script>

</html>
Источник

1 ответ

Решение

Вам нужно просто добавить этот код в js файл $(".btn-test").blur(); как это:

$(".btn-test").click(function(){

        $(".btn-test").blur();        
   

 alertify.confirm('Confirmation', 'You clicked', function () {
                //do nothing
            }
            , function () {
                //do nothing
            });

});
.btn-test:hover,.btn-test:focus{
background-color:red;
}
<html>
<head>
    <script src="https://cdn.jsdelivr.net/alertifyjs/1.8.0/alertify.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/alertifyjs/1.8.0/css/alertify.min.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/alertifyjs/1.8.0/css/themes/default.min.css"/>

</head>

<body>


<button class="btn-test">Click Me</button>


</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</html>

Источник
Другие вопросы по тегам