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. <\/p>\n
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. <\/p>\n
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:<\/p>\n
http:\/\/www.whatibroke.com\/?p=395
\n<\/a><\/p><\/blockquote>\nThe guy’s blog is great – clear, concise, and full of stuff that didn’t work, and how he made it work. <\/p>\n
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. <\/p>\n
Speaking of Which: If Your Modal Closes Instantly…<\/h3>\n
If you follow that tutorial and find that the dialog pops up and immediately disappears, check your application.js file. <\/p>\n
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.<\/p>\n
Just delete the require line for bootstrap-modal, and it should work just fine.<\/p>\n
But Wait! There’s More!<\/h3>\n
My ultimate goal is to have the user log in (achievement: unlocked<\/em>), 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.<\/p>\n
UPDATE<\/h3>\n