Html/css J query Javascript

Bootstrap Modals

Creating Modals with Bootstrap

bootstrap-modal

Modals are basically a dialog box that is used to provide important information to the user or prompt user to take necessary actions before moving on. Modal windows are widely used to warn users for situations like session time out or to receive their final confirmation before going to perform any critical actions such as saving or deleting important data.

You can easily create very smart and flexible dialog boxes with the Bootstrap modal plugin. The following example will show you how to create a simple modal with a header, message body and the footer containing action buttons for the user.

Require css and script at header tag:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<Script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

 

Require Html at body tag :

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<br />
<div id="myModal" class="modal fade">
<br />
<div class="modal-dialog">
<br />
<div class="modal-content">
<br />
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<br />
<h4 class="modal-title">Confirmation</h4>
<p>
</div>
<p>
<br />
<div class="modal-body">

<p>Do you want to save changes you made to document before closing?</p>
<p>
<br />
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
<p>
</div>
<p>
<br />
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<p>
</div>
<p>
</div>
<p>
</div>

Different size of modal:

Bootstrap gives you option further to scaling a modal up or down. You can a make modals larger or smaller by adding an extra class .modal-lg or .modal-sm on .modal-dialog.

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.