I’ve recently been doing some work on a web app that will use / is using the twitter bootstrap framework. There were two pieces of functionality that I wanted that weren’t readily available: transient alerts and confirmation dialogs. A transient alert is a message that appears and then fades away in a short period of time. A confirmation dialog is a modal dialog where some action happens when the user clicks a ‘Yes’ button, and nothing happens when they cancel/close/click ‘No’.
The confirm dialog was a fairly straight-forward adaption of the built in Modal element in bootstrap. However, the basic one fell short in several ways:
- The appearance was way too complicated for what I wanted, and simultaneously didn’t stand out enough
- The keyboard interaction was a bit sub-par; I wanted users to be able to use Enter to confirm as well as Escape to cancel – bootstrap supports the latter but not the former
- It was difficult to do something useful with a confirmation – the bootstrap Modal element doesn’t actually block execution, so you can’t easily wait for a response in code; you have to bind the relevant action to the click event of the Yes button
To build my confirm dialog I:
- Tweaked the CSS to reduce the noise and complexity, and to make the element stand out more
- Constructed a simple, stripped down DOM structure that works with the basic bootstrap Modal system. I store this in the JS file next to the launcher function just to keep relevant things close to each other.
- Built a JS function that takes a message and an handler that’s called when the Yes button is clicked
- Used a global to simplify passing data into the handler function
Then to use the confirm dialog create an action handler and then specify a click event (or other event, I guess) handler that launches the confirm dialog with an appropriate message and the event handler. If needed, first store any relevant data in the global data passing variable.
The transient alert was simpler in some ways in that I decided to build it form the ground up – leaning on bootstrap for some styling, but not for functionality. Essentially, it’s a simple div with replaceable text. When the transient alert is activated the text is changed as appropriate and a fade-out transition is initiated.