Bootstrap Modal Plugin
Bootstrap Modal Plugin : Bootstrap Modals are basically dialog box/popup box which are used to provide some additional information or prompt user to perform some action. Bootstrap modals are easy to implement.
![Bootstrap Modal Plugin Code And Example](http://tutorialsplane.com/wp-content/uploads/2015/06/bootstrap-modal.png)
Bootstrap Modal Demo And Example
Create Basic Modal
Bootstrap Modal Plugin
Bootstrap Modal Example : Basic
<!----modal starts here---> <div id="tutorialsplaneModal" class="modal fade" role='dialog'> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Tutorialsplane Modal Demo</h4> </div> <div class="modal-body"> <p>Here the description starts here........</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!--Modal ends here---> <!----add button to trigger the modal----> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#tutorialsplaneModal">Click Here To Open Modal</button> |
BootStrap Modal Sizes :
There are following bootstrap modal size available .
Note : Class .modal-sm is used for creating small modal.
Bootstrap Modal : Small
<!----modal starts here---> <div id="tutorialsplaneModal" class="modal fade" role='dialog'> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Tutorialsplane Modal Demo : Small Modal</h4> </div> <div class="modal-body"> <p>Here the description starts here........</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!--Modal ends here---> <!----add button to trigger the modal----> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#tutorialsplaneModal">Click Here To Open Modal</button> |
Note : Class .modal-lg is used for creating large modal.
Bootstrap Modal : Large
<!----modal starts here---> <div id="tutorialsplaneModal" class="modal fade" role='dialog'> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Tutorialsplane Modal Demo : Large Modal</h4> </div> <div class="modal-body"> <p>Here the description starts here........</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!--Modal ends here---> <!----add button to trigger the modal----> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#tutorialsplaneModal">Click Here To Open Large Modal</button> |
Advertisements