Modals in Bootstrap

How to open dialog box in a popup window using bootstrap

Modals

Modal is defined as the dialog box which is used to open the popup window

<h2>Bootstrap modal</h2>
   <a href="#" class="btn btn-success"data-target="#mymodal" data-toggle="modal">Click here</a>
    <div id="mymodal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" >&times;</button>
                    <h2>Welcome to TechFunda Tutorial    </h2>
                </div>
                <div class="modal-body">
                    <p>Bootstrap</p>
                    <p>JQuery</p>
                </div>
                <div class="modal-footer">
                    <span class="pull-left">Tutorials</span>
                    <button type="button" class="btn btn-success">HTML</button>
                    <button type="button" class="btn btn-warning">CSS</button>
                    <button type="button" class="btn btn-danger">JAVASCRIPT</button>
                </div>
            </div>
        </div>
    </div>

In the above code snippet we have defined the modal which opens a dialog box popup window, we have created a button with link in the anchor tag with value click here by using class attribute value as btn btn-success and data-target as #mymodal and data-toggle=modal
In the next line we are having the div element with an Id which should be same as data-target attribute which should trigger the modal(mymodal) and class attribute value modal fade defines
.modal class identifies the content of <div> as a modal and brings focus to it, .fade class adds a transition effect which fades the modal in and out. Remove this class if you do not want this effect.
In the next line we are having the modal-dialog which defines to set the proper width and margin of the modal.
In he next line we are having the modal-content which defines the inside function of the div such as header, body, footer
In the header section of the modal we have closing modal using class attribte value close and data-dismiss as modal and we have value in the header as Welcome to TechFunda Tutorial
In the next line we are having the modal-body with values as Bootstrap and JQuery
In the next line we are having the modal-footer to define the value, we used to <span> to define the value as Tutorial with class attribute value pull-left and after we created three buttons with class attribute values as btn-success, btn-warning and btn-danger with values HTML, CSS, JAVASCRIPT