It’s terrible (and annoying) UX when you’re trying to take an action, only to be sent through a whole slew of other pages, or worse, to be logged in, then redirected to a completely unrelated page.

However, I need donors to log in before donating, so the donation can be properly managed (oh, those banks and their rules…). So, I want to have a modal login dialog, that’s activated by any donation level button on the projects page, that returns the user gracefully to the project page when login is complete.

How to do this turns out to be way less obvious than I expected it to be, so I was very happy to come across this fantastic post on implementing a bootstrap JS modal popup:

http://www.whatibroke.com/?p=395

The guy’s blog is great – clear, concise, and full of stuff that didn’t work, and how he made it work.

I think of bootstrap as a layout/design thing, not a functionality thing, so I never even considered that it might have a .js modal dialog option.

Speaking of Which: If Your Modal Closes Instantly…

If you follow that tutorial and find that the dialog pops up and immediately disappears, check your application.js file.

The tutorial tells you to require bootstrap-modal in your applicaiton.js. This is unnecessary if you’ve already required bootstrap, since it includes modal. If you do include it, the modal code will be called twice – once via the main bootstrap.js and once via the bootstrap-modal.js – in rapid succession, which will dismiss the modal almost as soon as it is drawn.

Just delete the require line for bootstrap-modal, and it should work just fine.

But Wait! There’s More!

My ultimate goal is to have the user log in (achievement: unlocked), the dialog automatically close when login completes, and the parent page automatically refresh when the dialog closes. The code in the tutorial doesn’t do that. I’ll put up a post with lots of pretty code snippets when I’ve got it all working.

UPDATE

Apparently, it’s a total nuisance, due to bootstrap folks deciding not to attach click events to buttons within the modal in v3, so I’ll find a different solution, at some point.