What is Bootstrap Modal?
It is a kind of Popup used by Website Designers.
The modal will be looking like this:
 |
| example of how a bootstrap modal will look like |
The popup you see is called as Modal
The gray color background is called as Overlay
Behind the gray color background is the Main Page
Inside the modal, there are three sections:
In the above image,the area which contains "Edit Record" is called as HEADER, the middle portion is called as BODY. The bottom portion which contains two buttons is called as FOOTER.
======================================
A smallest and complete code for bootstrap modal is given below. copy and past it in a text file and save it as test.html and open it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/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.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
CONTENTS GOES HERE
</div>
</div>
</div>
</div>
</body>
</html>
Following is the output for the above code:
===================================================================================
Why it is called as BOOTSTRAP?
To create the above modal design, you need lot of javascript and css. But a group of people took pain and created a framework with complicated javascript and css. This framework is called as Bootstrap.
Finally the webdesigner need not know or understand this complicated javascript. With few lines of code, he can create such popup.
Bootstrap was mainly designed for RESPONSIVE WEBSITE.
What is the meaning of "Responsive"?. A website whose designs automatically changes its look and feel depending on whether you view on a pc or mobile phone.
===============================
A modal code will be like this:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<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" id="myModalLabel">This is My Title</h4>
</div>
<div class="modal-body">
<h3>Here goes the contents of the modal</h3>
</div>
<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>
</div>
</div>
</div>
========================================================================
The above image is the modal created by the above source code.
For creation and testing of your own modal, please visit this site: http://www.bootply.com/88364
In the above code, the id of the modal is "myModal".
It is normally not visible (see the code class="modal fade")
To bring this modal to life, the link will be like this:
<a href="#" class="btn" data-toggle="modal"
data-target="#myModal">Click Here</a>
When you click the link, the target ie the modal with id "myModal" will be displayed.
The display command is data-toggle="modal"
Code definitions:
× = this is the html code to show "x" symbol, which is shown at the right top of the modal.
data-dismiss="modal" :::: This attribute closes the modal
==================================
Code for putting a form inside the bootstrap modal popup:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/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.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal" >
<div class="modal-dialog">
<div class="modal-content">
<div role="dialog" >
<table><tr><td> Name</td>
<td> <input id="name" type="text" /></td></tr>
<tr><td>Designation</td>
<td><input id="designation" type="text"/></td> </tr>
<tr><td colspan="2"> <input type="submit" value="Save"/></td>
</tr></table>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
============================================
<div class="modal-dialog modal-sm"> makes the modal small
<div class="modal-dialog modal-lg"> makes the modal larger
data-toggle="modal" opens the modal window
data-target="#myModal" tell which modal is to be opened
<div id="myModal" class="modal fade" role="dialog"> in this line, if you remove "fade", the modal will be shown but will not be showing the sliding effect or slowly fadding effect.
<div class="modal-dialog modal-sm"> makes the modal small
<div class="modal-dialog modal-lg"> makes the modal larger
data-toggle="modal" opens the modal window
data-target="#myModal" tell which modal is to be opened
<div id="myModal" class="modal fade" role="dialog"> in this line, if you remove "fade", the modal will be shown but will not be showing the sliding effect or slowly fadding effect.
Thank you for sharing this piece! It is very helpful and informative. Would like to see more updates from you.
ReplyDeleteMelbourne Web Developer