jump to navigation

bootstrap confirm dialog and transient alert April 26, 2013

Posted by ficial in javascript, techy, webdev.
Tags: , , , , , , , ,
trackback

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.

Here’s the code for the confirmation dialog (definition and example usage).

 

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.

Here’s the code for the transient alert (definition and example usage).

 

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: