Preventing BootStrap Alert From Being Remove on the DOM

BootStrap Alert is used to display messages or error messages on the DOM while users tries to navigate or perform some actions on the web. But by default, the BootStrap Alert is only one time use. The moment the alert was closed, it will never appear again.

We can solved this problem by using JavaScript:

Lets say on the html, this is the alert block.

On the JavaScript, we will add an on listener to prevent it from removing from the DOM when the user closes it.

By adding return false on the close event, this will prevent the alert from being remove from the DOM. Prior to that we should hide it so that it not be visible on the page.
When we want to show it again, we will just invoke the show method.


I believe this can be further explain if we have a sample code to play with:

The example below is a form entry that will validate empty entry before posting data to server.

Screen Shot:


index.html

site.js

Thank you! Hope this article helps.