javascriptjqueryhtmlcssalertifyjs

How to remove focus from button after closing the "altertify" confirm modal?


I have a button with :hover and :focus css property. While hovering on it the color changes to red. Now when i click on it a Alertify confirm box appears and then i press ok or cancel the color changes to red again because of :focus property. How can i unbind :focus when clicked on ok or cancel.

<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>

Solution

  • you have to just add this code in js file $(".btn-test").blur(); like this:

    $(".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>