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