Modals can be defined as a dialog box that is appeared on the current page, based on certain events occurred. BootStrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites and it also provides the privilege of creating and using Modals within a Website, without BootStrap it was quite tedious to design a Modal, cause then we have to write all of the CSS by own, but as we are implementing BootStrap, we simply had to include the classes that have already been defined to create a responsive and well-designed Modal.
In order to implement the Modal Plugin of BootStrap, the first thing we need to include is to include the script file, either we can include the modal.js script file or we can include the bootstrap.js/bootstrap.min.js for using all the things at once, if we include only modal.js then we won't be able to use rest of the classes of BootStrap, so it is always recommended to use the all in one script file.
In this article of mine, I am going to provide a code snippet of creating a simple Modal, with most of it options are covered.I am creating a Modal that can be used for the Login Purpose.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
//including the required script and CSS files, here the jquery script file is also included because the modal can be either triggered by data-attributes or by using jquery.,I have used the data-attributes for triggering the modal and have also given the script below, to trigger using jquery
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
//defining little bit styling of the Modal
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color:white !important;
text-align: center;
font-size: 30px;
font-weight: bold;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container">
<h2 style="text-align:center">Bootstrap Login Modal</h2><br/>
<!-- Trigger the modal with a button -->
<!--data-toggle and data-target attributes are responsible for triggering the respective Modal with the class name modal and having id myModal, data-backdrop attribute is used so that the modal can not be closed by clicking outside the modal, data-keyboard attribute is used to prevent closing of modal using the escape key-->
<div style="text-align:center"><button type="button" class="btn btn-default btn-lg" id="myBtn" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Login</button>
</div>
<!-- Modal here the class fade is used to give it a transition feel when it comes -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<!--glphicon class is used to show lightweight icons in front of contents-->
<h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
</div>
</div>
<!--If you want to trigger the modal using script, then you will be needed to remove the data-toggle and data-target attribute from the respective button and rest of the attributes can also be set using the script like $("#myModal").modal({backdrop: true/static/false}) needs to be written inside the click function -->
<!--<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
</script>-->
</body>
</html>
Screenshots:
 |
| 1 |
 |
| 2 |
Scenarios where Modal can be used:
- The first scenario where Modal can be used is simple creating a Login Modal that we have created in this article.
- Modal can also be implemented and can be triggered at the time of logout to get the Email addresses of the visitors.
- Modal can be prompted at the time of user navigating to some other website and leaving your site to ask whether they are sure to leave the site or not.
The implementation of the Modal is completely dependent on the need and the creativity of the designer and the developer of the Website that where and how they are going to implement it. When I created my first Website I used Modal for the making sure that User wants to Logout, and I triggered it on the Logout Link of my WebSite and asked the user whether they really want to log out or not.
No comments:
Post a Comment
Thanks for Your Time!