Bootstrap is developed by Twitter Inc, and comes with predefined CSS and JavaScript. By using Bootstrap, we can design a very responsive website easily. It is very handy once you understand.
Introduction
Please read
Bootstrap Introduction if you are new to Bootstrap.
Modals are the form fields which can be shown as dialog or a popup. Bootstrap comes with some predefined Modal Classes that you might see in bootstrap.css.
Background
The main objective of this article is to learn creating different types of Modals using Bootstrap.
Using Bootstrap code
As we said above, there are so many styles regarding to Modals in bootstrap.css which are used to create modals in our application.Lets see creating Modal with Data attributes as shown in below code
<a href="#modelSave" role="button" class="btn btn-success" data-toggle="modal">Click to Show Modal</a>
<div id="modelSave" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Welcome, This is Modal Header</h3>
</div>
<div class="modal-body">
<p>This is the body of the Modal</p>
<span class="text-warning">Normal Text</span> & <span class="text-danger"><small>Small Text</small></span>
</div>
<div class="modal-footer">
<span class="pull-left">This is the Footer Section</span>
<a href="#" class="btn btn-primary">Cancel</a>
<a href="#" class="btn btn-primary">Back</a>
<a href="#" class="btn btn-primary">Next</a>
</div>
</div>
</div>
</div>Observe the above code clearly where we have used so many modal related classes like
heading,
body,
footer,
content etc.
If you run this you might see the output something like below in your browser,
We can close this as we do for Alerts.
Modal using JavaScript:
We can also create the same Modal shown above by using a little Script as shown below,
<script type="text/javascript">
$(document).ready(function () {
$("#modalSave").modal('show');
});
</script>And your HTML as,
<div id="modalSave" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Welcome, This is Modal from JavaScript</h3>
</div>
<div class="modal-body">
<p>This is the body of the Modal</p>
<span class="text-warning">Normal Text</span> & <span class="text-danger"><small>Small Text</small></span>
</div>
<div class="modal-footer">
<span class="pull-left">This is the Footer Section</span>
<a href="#" class="btn btn-primary">Cancel</a>
<a href="#" class="btn btn-primary">Back</a>
<a href="#" class="btn btn-primary">Next</a>
</div>
</div>
</div>
</div>Now run this combination of code in your browser to get the same result as above
Hiding Modal:In order to hide the model, Just use '
Hide' instead of '
Show' in the above Script i.e,
<script type="text/javascript">
$(document).ready(function () {
$(".hide-modal").click(function () {
$("#myModal").modal('hide');
});
});
</script>This will hides your Modal and doesn't shows anything.
Toggle Function:
There is a toggle function in the JavaScript for Modals of Bootstrap. In order to use that, you have to follow the below script,
<script type="text/javascript">
$(document).ready(function () {
$(".toggle-modal").click(function () {
$("#modalSave").modal('toggle');
});
});
</script>This function will toggles the action of Modal for the Modal Firing element such as Button etc.
KeyBoard Function:
There is another function called keyboard(boolean) for Modals which makes use of Keyboard Keys such as Esc to close the Modal
<script type="text/javascript">
$(document).ready(function () {
$(".launch-modal").click(function () {
$("#modalSave").modal({
keyboard: false
});
});
});
</script>By default it is set to true and use the above Script to make it disabled.
Setting Alert from JavaScript:
We can also set the Alert messages from JavaScript to the Modals. Take a look at below script in which we are setting alert on closing the Modal,
<script type="text/javascript">
$(document).ready(function () {
$("#modalSave").on('hidden.bs.modal', function () {
alert("Modal window has closed Completely.");
});
});
</script>This will shows an Alert message after closing your Modal like below,
Use
shown.bs.modal event instead of
hidden.bs.modal to show the alert on Modal StartUp.
There is another function called backdrop(boolean), that includes the modal backdrop element. If you specifies static to the backdrop function, that doesn't closes modal on clicking.
You might also use modal-lg and modal-sm classes to create larger and smaller modals respectively.
Conclusion
In this article, we have seen different types of creating Modals by using Bootstrap. Hope you Understand it. If you have any doubts on this topic, please ask in the below comment box.
Thanks for reading.
Regards,
Krishna.