In this tutorial bootstrap modal is explained with example. Basically bootstrap modal is a dialog box or a popup box which appears while click on a targeted button. Hope you will enjoy this tutorial.
Basic example of Modal
In this example the modal source code consist on bootstrap classes
like modal, modal-dialog, modal-header, modal-content, modal-body and modal-footer. The modal-dialog-scrollable class
is used to make scroll able content inside the modal. While modal-header is used for heading of the modal
and modal content is used for content like modal body. The modal footer class is used for footer area of
the modal. While two close button are targeting the modal class to close while using data-dismiss attribute.
<h3>Basic example of a modal</h3><br/><buttontype="button"class="btn btn-info"data-toggle="modal"data-target="#ExampleOfMyModal">Click here to Open modal<iclass="fa fa-arrow-down"></i></button><divclass="modal"id="ExampleOfMyModal"><divclass="modal-dialog modal-dialog-scrollable"><divclass="modal-content"><divclass="modal-header"><h2class="modal-title">This is title of modal</h2><buttontype="button"class="close text-danger"data-dismiss="modal">X</button></div><divclass="modal-body"><h4>This is modal body</h4><p>This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text. This is dummy text.</p></div><divclass="modal-footer"><buttontype="button"class="btn btn-danger"data-dismiss="modal">Close</button></div></div></div></div>
Output of above code
Basic example of a modal
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
