My Bootstrap alert will not display after being closed

Question

Hi I have the following alert that is hidden on the page

<div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    @TempData["selCode"]
</div>

I display it with the following javascript

    $('#send_reject_btn').click(function () {
        var selRowIds = $("#ApprovalGrid").jqGrid('getGridParam', 'selarrrow');
        if (selRowIds.length > 0) {
            $('#reject_alert').show();
        } else {
            $('#selectCodeNotificationArea').show();
        }
    });

This is obviously linked to a button in my html.

After the alert is shown if I close it using the<button type="button" class="close" data-dismiss="alert">×</button> The next time I press the button to open the alert I can see $('#selectCodeNotificationArea').show(); being called in my debug screen but the alert doesn't display again.

Has anyone experienced this before?

[Possible duplicate](https://stackoverflow.com/questions/13550477/twitter-bootstrap-alert-message-close-and-open-again) — ThisIsNotAnId, Oct 24 '19 at 16:47
Does this answer your question? [Twitter Bootstrap alert message close and open again](https://stackoverflow.com/questions/13550477/twitter-bootstrap-alert-message-close-and-open-again) — Ali Karaca, Dec 11 '19 at 09:52

score 82 · Accepted Answer · answered Dec 10 '13 at 12:51

82

The Data-dismiss completley removes the element. You would need to hide the alert if you are intending on showing it again.

For example;

<div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden">
    <button type="button" class="close" data-hide="alert">&times;</button>
    @TempData["selCode"]
</div>

and this JS

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

answered Dec 10 '13 at 12:51

David Christiansen

5,869
2
36
42

3

I like this approach. Did the idea come from this post? --> http://stackoverflow.com/questions/13550477/twitter-bootstrap-alert-message-close-and-open-again/13550556#13550556 – Sk8erPeter Jun 10 '14 at 22:50
1

I had to use: "$(document).on("click", "[data-hide]", function()". Your syntax didn't work for, but didn't fire any errors either. Any idea why? – Emeka Jan 20 '16 at 23:01
1

It would be nice if Bootstrap included this functionality out of the box, instead of it having to be added outside (*id est*, as part of a site's JS). – Agi Hammerthief Nov 16 '17 at 12:19

score 9 · Answer 2 · edited Apr 23 '15 at 10:22

Better way is to remove , data-dismiss="alert" from your tag , and use class name i.e. close to hide and show the error / warning .

// WHEN CLOSE CLICK HIDE THE ERROR / WARNING .
$(".close").live("click", function(e) 
{   
    $("#add_item_err").hide();
});

// SOME EVENT TRIGGER IT.
$("#add_item_err").show();

[ I am working on dynamically added elements , that's why I am using 'live' , you may have to change as per your req.]

score 5 · Answer 3 · answered Dec 10 '13 at 12:55

Bootsrap $(selector).alert('close') (http://getbootstrap.com/javascript/#alerts) actually removes alert element so you cannot display it again. To implement desired functionality just remove data-dismiss="alert" attribute from close button defintion and add some little event handler to hide the alert

<div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden">
   <button type="button" class="close alert-close">&times;</button>
   @TempData["selCode"]
</div>

<script>
$(function() {
   $(document).on('click', '.alert-close', function() {
       $(this).parent().hide();
   })
});
</script>

score 1 · Answer 4 · answered May 06 '14 at 11:22

I ran into this problem as well and the the problem with ticked solution above is that I still need access to the standard bootstrap alert-close events.

My solution was to write a small, customisable, jquery plugin that injects a properly formed Bootstrap 3 alert (with or without close button as you need it) with a minimum of fuss and allows you to easily regenerate it after the box is closed.

See https://github.com/davesag/jquery-bs3Alert for usage, tests, and examples.

score 0 · Answer 5 · answered Mar 22 '14 at 10:17

Actually bootstrap alert are designed to be removed rather than hidden. You can tell that by looking at the alert message, it hasn't got any wrapping element. So any attempt to change alert message require extra code (finding text node elements). You should redesign your application and create new .alert element every time you willing to change it / show it again.

jsa · Answer 6 · 2018-07-15T17:17:10.827

I used the following working approach.

$(document).ready(function(){
    $("#btnFV").click(function()
    {
        $("#alertFV").addClass("in");
    });

    $("#alertFV").on("close.bs.alert", function ()
    {
        $("#alertFV").removeClass("in");
        return false;
    });
});

Html body contains below alert

<button id="btnFV" class="form-control">Button To Show/Hide Alert</button>

<div id="alertFV"  class="alert alert-danger alert-dismissable fade show">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
         <span aria-hidden="true">&times;</span>
      </button>
      <strong>Danger!</strong> 
    </div>

score 0 · Answer 7 · answered Aug 29 '21 at 10:34

Bootstrap 5 Solution --> Tested with .NET Core 5.0

The bootstrap alert HTML code (these are stored in a Razor View Component)

<!-------------------------------->
<!-- INFORMATION Bootstrap Alert-->
<!-------------------------------->
<div class="alert alert-info alert-dismissible fade show bg-info" role="alert" id="bootstrapInformationAlertDiv" style="display:none;">
    <div class="custom-alert-div-information text-light font-weight-bold text-dark" id="bootstrapInformationAlertMessageDiv">&nbsp;</div>
    <button type="button" class="btn-close" aria-label="Close" id="bootstrapInformationAlertBtn"></button>
</div>
<!---------------------------->
<!-- SUCCESS Bootstrap Alert-->
<!---------------------------->
<div class="alert alert-success alert-dismissible fade show bg-success" role="alert" id="bootstrapSuccessAlertDiv" style="display:none;">
    <div class="custom-alert-div-success text-light font-weight-bold" id="bootstrapSuccessAlertMessageDiv">&nbsp;</div>
    <button type="button" class="btn-close" aria-label="Close" id="bootstrapSuccessAlertBtn"></button>
</div>
<!---------------------------->
<!-- WARNING Bootstrap Alert-->
<!---------------------------->
<div class="alert alert-warning alert-dismissible fade show bg-warning" role="alert" id="bootstrapWarningAlertDiv" style="display:none;">
    <div class="custom-alert-div-warning text-black font-weight-bold" id="bootstrapWarningAlertMessageDiv">&nbsp;</div>
    <button type="button" class="btn-close" aria-label="Close" id="bootstrapWarningAlertBtn"></button>
</div>
<!--------------------------->
<!-- DANGER Bootstrap Alert-->
<!--------------------------->
<div class="alert alert-danger alert-dismissible fade show bg-danger" role="alert" id="bootstrapDangerAlertDiv" style="display:none;">
    <div class="custom-alert-div-danger text-light font-weight-bold" id="bootstrapDangerAlertMessageDiv">&nbsp;</div>
    <button type="button" class="btn-close" aria-label="Close" id="bootstrapDangerAlertBtn"></button>
</div>

The above view component is added at the top of each web page:

<!-- Bootsrap Alert View Component -->
<div>
    @await Component.InvokeAsync("BootstrapAlert")
</div>

I then added a small JS file to my project (bootstrapAlert.js):

$("#bootstrapInformationAlertBtn").click(function () {
    event.preventDefault();
    $(this).parent().hide();
});

$("#bootstrapSuccessAlertBtn").click(function () {
    event.preventDefault();
    $(this).parent().hide();
});

$("#bootstrapWarningAlertBtn").click(function () {
    event.preventDefault();
    $(this).parent().hide();
});

$("#bootstrapDangerAlertBtn").click(function () {
    event.preventDefault();
    $(this).parent().hide();
});

In my main Layout.cshtml file I add the script ref to the above js file so it's auto loads with each page in my site:

<!-- Load the js script file on each page for hiding the bootstrap alert when closed -->
<script src="~/js/bootstrap-alert-custom-scripts/bootstrapAlert.js"></script>

When calling a bootstrap alert to open from any of my javascript functions, I use the following code:

window.scrollTo(0, 0); // Scroll to the top of the page.
document.getElementById("bootstrapWarningAlertMessageDiv").innerHTML = 'Write your custom message here for the current issue / notification!';
$("#bootstrapWarningAlertDiv").show();
setTimeout(function () { $("#bootstrapWarningAlertDiv").hide(); }, 8000);

The window scroll to command is a nice little touch because the user may be scrolled some way down the page and if you're always adding the alert in the same place i.e. at the top of the page, then they wouldn't necessarily see it when it opens up.

score 0 · Answer 8 · answered Feb 28 '23 at 08:01

As mentioned in bootstrap documentation the alert element completely removed when you click on the close button

When an alert is dismissed, the element is completely removed from the page structure.

But you can stop this behavior by removing data-dismiss="alert" if you are using bootstrap 4 and data-bs-dismiss="alert" if you are using bootstrap 5 and add a click event to a close button like onclick="this.parentElement.style.display='none'". Example:

<div class="alert alert-primary alert-dismissible fade show" role="alert" style="display: none;">
    <span class="message"></span>
    <button type="button" class="btn-close" aria-label="Close" onclick="this.parentElement.style.display='none'"></button>
</div>

My Bootstrap alert will not display after being closed

8 Answers8

Linked