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

Developing apps for airtable using Airtable Blocks

The airtable smart sheets now has an app platform called Airtable Blocks, which allows developers to add custom code, and build apps quickly...