JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

Bootstrap Modals

July 19, 2014 by Krishna Srinivasan Leave a Comment

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:

  • Bootstrap Setup
  • Bootstrap Typography

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">&times;</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.

  • Run Bootstrap Static Modal Example

Bootstrap Static Modal Example1
Bootstrap Static Modal Example2

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">&times;</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]

  • Run Bootstrap Modal via JavaScript Example

Bootstrap Modal via JavaScript Example

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">&times;</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]

  • Run Bootstrap Modal Method Example

Bootstrap Modal Method Example

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.

Filed Under: Bootstrap Tagged With: Bootstrap Plugins

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved