Ad

Monday, April 18, 2016

Startup Front End UI Essentials : Using Modal with Forms with Twitter Bootstrap framework

Modal or a modern popup window is now an omnipresent startup front-end UI element. It's useful when prompting the user to login, subscribe to a newsletter, and take an exit offer.

Here's the basic hierarchy if using the Bootstrap framework:
modal hierarchy
modal
modal-dialog
modal-content
modal-header
modal-title
modal-body
modal-footer
data-dismiss="modal"


Not exactly concise. Because though small, the element has all the essential backbone of a full web page: header, body, footer, exit, and it usually handles a form with input and submit button. It's not a trivial element.

Put the mini form, such as a login form, and its submit button in the modal-body.

Bootstrap also comes with useful javascript snippets for modal events. $('#my_modal_id').modal('show');
$('#my_modal_id').modal('hide');

It's best not to reinvent the wheel and use the readily available code in Twitter Bootstrap framework, now just known as Bootstrap. Official documentation here:
http://getbootstrap.com/javascript/#modals

No comments:

Post a Comment

Firebase Stripe Extension for payment debugging

 If your stripe webhook contains errors, Stripe will email you and inform you that requests to this end point has failed. In this case, we g...