Bootstrap Modals are basically dialog box which are created using custom jQuery plugin. Modals are streamlined, dialog prompts which will have content from an outside source to indicate important information to the user to take necessary actions before moving on. A modal is often called as child window which is used as a window to display slideshows, user login, advertising etc without leaving the parent window. Modals are widely used to warn users for situations like confirmation before going to perform any actions such as saving or deleting important data.
also read:
We can create flexible dialog boxes easily with Bootstrap by using the .modal class along with div element. The below example shows how to use Bootstrap Modals in our webpage. If you have any questions about bootstrap modals, please write it in the comments section.
Bootstrap Static Modal
[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Static Modal</h2>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#DemoModal">Click to Launch Demo Modal</button>
<div class="modal fade" id="DemoModal">
<div class="modal-dailog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">My Modal</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this item?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-success" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]
As shown in the above script, we have used two classes. First is .modal which defines div element as modal. Second is .fade which causes the content to fade in and fade out when modal is toggled. We can see in the <button> tag, the data-target=”#DemoModal” to set target of the modal which we want to load on the webpage. The div element contains .modal-content class which indicates where to look for the contents of the model.
The .modal-header class, as the name implies, it defines title for the modal window and within this class, we are using data-dismiss=”modal” class is used to close the modal window. The .modal-body class indicates content for the modal which we want to display on the webpage such as video, an image or anything else. Lastly, we have the .modal-footer class which is by default right aligned and we could place action buttons such as save, close, yes, no, accept etc are associated with the action.
Bootstrap Modal Usage
We can toggle the modal plugin content by using data attributes and javascript method. The above example is written by using data attributes. Now we will see, how to activate Bootstrap modal window via JavaScript.
Modal via JavaScript
We can activate the Bootstrap modal by using JavaScript code as shown as shown in the below line:
[code lang=”xml”]
$(“#DemoModal”).modal(options)
[/code]
Here we have used option as show to show the modal when initialized. Just use id or class selector with the modal in the JavaScript code. The following is an example:
[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Example of Twitter Bootstrap 3 Modals</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn").click(function(){
$("#myModal").modal(‘show’);
});
});
</script>
</head>
<body>
<div class="container">
<h2>Modal via JavaScript</h2>
<a href="#" class="btn btn-lg btn-primary">Click to Launch Demo Modal</a>
<div id="myModal" 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>
<h4 class="modal-title">My Modal</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this item?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-success" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]
Bootstrap Modal Options
The following table shows options which can be used with modal window:
| Option | Type Value | Default Value | Description |
|---|---|---|---|
| backdrop | boolean | true | It is used to include modal backdrop element i.e. black overlay area. |
| keyboard | boolean | true | Modal window is closed when escape key is pressed. |
| show | boolean | true | Modal window is showed when initialized. |
| remote | URL | false | Content will be loaded by using jQuery’s load method and injected into modal content. |
Bootstrap Modal Methods
| Method | Description | Example |
|---|---|---|
| .modal(options) | It activates the content as modal. | $(‘#DemoModal’).modal({ Keyboard: false }) |
| .modal(‘toggle’) | It toggles the modal window manually. | $(‘#DemoModal’).modal(‘toggle’) |
| .modal(show) | It is used to open modal window manually. | >$(‘#DemoModal’).modal(‘show’) |
| .modal(‘hide’) | It hides the modal manually. | >$(‘#DemoModal’).modal(‘hide’) |
The following example shows use of modal method called hide and option called show. When we run the script, we will get modal window immediately. After clicking on the specified button, the modal window will be hidden.
[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#DemoModal").modal(‘show’);
$(‘.hide-modal’).click(function(){
$("#DemoModal").modal(‘hide’);
});
});
</script>
</head>
<body>
<div class="container">
<h2>Modal via JavaScript</h2>
<a href="#" class="btn btn-lg btn-primary hide-modal">Click to Hide Demo Modal</a>
<div id="DemoModal" 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>
<h4 class="modal-title">My Modal</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this item?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-success" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]
Bootstrap Modal Events
The following table shows four events which are used with modal.
| Event Type | Description |
|---|---|
| show.bs.modal | It is used when the show instance method is invoked. |
| shown.bs.modal | It triggers when modal has been made visible to the user. |
| hide.bs.modal | It is used when the hide instance method has been called. |
| hidden.bs.modal | It triggers when the modal is hidden from the user. |
Leave a Reply