Kleber Mota Kleber Mota - 5 months ago 15
jQuery Question

Hide alert when click on close button instead remove it

In my page, the response from server is displayed using this alert:

<div id="yes" class="alert alert-success" role="alert" style="display: none;">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<strong>Pronto!</strong> cadastro efetuado com sucesso!
</div>


Is there any way to when I click in the close button from the alert, it be hide instead removed from page? I try this (following instructions from here), without success:

$('#my-alert').on('close.bs.alert', function () {
$(this).hide();
})


UPDATE

I also try this:

$('button.close').on("click", function(){
$(this).parent().hide();
});


but still the same problem, when I click in the close button, the alert is removed.

Answer

Solution I found for this problem:

Create a new data attribute for hiding an element.

Javascript:

$(function(){
    $("[data-hide]").on("click", function(){
        $("." + $(this).attr("data-hide")).hide();
        // -or-, see below
        // $(this).closest("." + $(this).attr("data-hide")).hide();
    });
});

and then change data-dismiss to data-hide in the markup. Example at jsfiddle.

$("." + $(this).attr("data-hide")).hide();

This will hide all elements with the class specified in data-hide, i.e: data-hide="alert" will hide all elements with the alert class.

based on the answer posted in this topic: Twitter Bootstrap alert message close and open again

Comments