Adding a flash & disappear alert pan to bootstrap without third party integration.


Flash alert as used in DevLess

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.

Bootstrap modal acting as an alert pan

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

Snapshot of flash notifier from the 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!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.