How to build pop-up modal using bootstrap

Typical modal pop-up make use JQuery library or other JS libraries, but this can be done easily with a framework like bootstrap. In this demonstration I will show you how to build an animated modal pop-up.

VIEW DEMO DOWNLOAD SOURCE

1.Modal Triggering Button

This may be button or anchor tag. This is triggering element is used to trigger the modal, that means opening the modal when this element is clicked. This button or anchor tag make used of TWO attributes:

data-toggle="modal" is used to open and close the modal window
data-target="#myModal" points to the id of the ,that means the modal should have id : id="myModal"

2.The Modal Design

Since we have data-target="#myModal", this means that our modal div should have id: id="myModal". This div for modal make use of:

class="modal" to tell bootstrap that this div element is a modal.
class="fade" is used for animating the transition when the modal is opening or closing.
class="modal-dialog" is used to set the appropriate margins and width for the modal.
role="Modal" is for accessibility for disable people to understand that this is a modal.

3.The Modal Content

The modal content has THREE parts which are:

Modal Header: This is the header div in the modal with class .modal-header to style the header for modal. Inside this header you'll find : 1.closing buttonwith data-dismiss="modal" which facilitates the closing of the modal when this button is clicked, also the class .close for styling the button
2.some h4 with class="modal-header" h4 for appropriate line-height for modal title.
Modal Body: This refers to div with class="modal-body" (to style the body section of the modal) for main content of the modal. Put any type of content you (this could audio, video or paragraph etc.)/
Modal Footer has class class="modal-footer" used to style the footer section of the modal.