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 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>
|