Introduction to Bootstrap Modals and some examples

|
| By Webner

Bootstrap Modals and Examples

Bootstrap Modal is referred to as the pop up window that appears when a certain area on a web-page is clicked.

It can be used for many purposes like giving warning messages, privacy policy agreement forms, login forms and many more. Just like a web-page the Bootstrap Modal has a header, footer and a body area. In the header, we can specify the heading of the modal. In the body of the modal the message or the input that is specified by the user can be added. The input can be of any kind. It can be a plain text or it can be an HTML element.

Footer can be left blank or a button can be specified which will perform the desired action.

Modal can be triggered using the parent Modal attributes ( .data-* ) or it can either be done with the help of javascript.

Detailed reference to the Bootstrap Modal:-

a) Modal Plugin Classes:-
.modal is used for the Modal creation.
.modal-content is to add the Modals header, body and footer.
.modal-header, .modal-body, .modal-footer are the classes that are used to define their respective styles.
.modal-lg, .modal-sm are used to specify whether the Modal is large or small.
.fade is to add the transition effects.

b) Modal options :-
backdrop is referred to the option in which the overlay of the modal is decided. It can either be set “true” or “false” and the value by default is true.
keyboard is the option which is used to close the Modal with the press of “Esc” key on the Keyboard. It can be set to “true” or “false” . The value it holds by default is “true”.
show is used to specify whether the modal will be shown upon initialization. By default it is “true” .

Example of the Bootstrap Modal :

As it is seen in the above image, the header contains a message “WARNING” and on the top right corner is the close button that is used to close the modal.

The body displays the message “Difficulty Level can not be empty.” This is just the basic Bootstrap Modal that is used here.

Code:

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div id="contentsModalHeader" class="modal-header "><span class="glyphicon glyphicon-warning-sign"></span>
Warning
<button id="contentsModalHeaderButton" type="button" class="close" data-dismiss="modal">×</button>
</div>
<div id="contentsModalBody" class="modal-body">
<p class="error">Difficulty Level can not be empty.</p>
</div>
</div>
</div>
</div>

Another example:

In the image above it is seen that the Modal is used to send the Email to the recipient whose address is entered in the Input field.

Footer here is absent and the buttons “Send” and “Close” are enclosed in the body of the Modal.

Code:

<div class="modal fade" id="my_modal" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Share Test Result
</h4>
</div>
<div class="modal-body">
<p class="statusMsg">
</p>
<form role="form" id="newModalForm" >
<div class="form-group">
<label class="control-label col-md-3" for="email">To
</label>
<div class="col-md-9">
<input type="text" class="form-control" id="to" data-toggle="tooltip" data-placement="top" name="to" placeholder="Enter comma separated Email Ids" title="Enter comma separated Email Ids" required />
</div>
</div>
<div>
<button type="submit" class="btn btn-success submitBtn" id="btnSaveIt" >Send
</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close
</button>
</div>
</form>
</div>
</div>
</div>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *