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" >×</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>
btn btn-success
and data-target
as #mymodal and data-toggle
=modal 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.modal-dialog
which defines to set the proper width and margin of the modal.modal-content
which defines the inside function of the div such as header, body, footerclose
and data-dismiss
as modal and we have value in the header as Welcome to TechFunda Tutorialmodal-body
with values as Bootstrap and JQuerymodal-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, JAVASCRIPToutput
After clicking the button it opens a dialog box in a popup window
Views: 4532 | Post Order: 52