Adding a flash & disappear alert pan to bootstrap without third party integration.
Bootstrap is a really cool frontend framework providing most of the common styling features and frontend functionalities.
Bootstrap is so popular that sometimes the web feels “bootstrappy”. It provides a whole host of components that you will likely need to perp up your user interface. These components are easy to implement. One thing I like about bootstrap is that it’s really easy to work with.
Although bootstrap provides some of the common components I need, there are some I modify from time to time just to get the exact look and feel that I want. One of them is the bootstrap alert. For most of my UIs, I prefer to have my alert messages flash and disappear . To make this possible the most obvious way is to grab a third party notification library .
I love the simplicity bootstrap provides and usually modify existing components to get them to look and behave like I want and still maintain that simplicity.
In the case of the alert box . I decided to modify bootstraps own modal to flash and display as an alert box.
Below I have explained the code that I came up for doing this without the introduction of a third party library.
I have made the source available as a GIST
The above code should show the flash alert on open within your browser . If you are familiar with bootstrap then the above code is straightforward.
I added an inline css to the modal-dialog div “ <div class=”modal-dialog” style=”width:250px;height:3%;”>”to get the bootstrap modal to resize and give it that notification pan look . By the way feel free to move the inline styling to a separate file.
Alter the value within “ setTimeout(‘hide()’, 2000);” to change how long the pan shows. Also, in case you would like the backdrop to show remove this line “ $(‘.modal-backdrop’).removeClass(“modal-backdrop”);”
Feel free to hit me up on here in case you need any clarity or help with implementing it as this post acts as a README to the GIST .😊
Please hit love if this was helpful 🙌
Happy coding!
