Quick Reach
The Modal
The Modal is a prompt dialog window which is the child of the parent window that is generally used to interact with visitors of the websites without leaving the parent window. Examples can be asking for a subscription to social networks, sign-up to your website etc.
You might have seen a sales related page with the special offer or some kind of discount, as a user closes the parent window showing a dialog to confirm etc.
Using Twitter Bootstrap framework makes it quite easier to use the Modal windows in your website. Modal is not only easy to use, but modal windows are streamlined and flexible with the smart styles that require minimum functionality.
Following are a few examples of using Twitter Bootstrap Modal.
A subscription modal example
Following example shows a Bootstrap framework based modal as you click on the link below. The modal window shows a Bootstrap form with an email textbox field and option to “Subscribe” or Close the window.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<!DOCTYPE html>
<html>
<head>
<title>Modal example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Modal bootstrap example</h1>
<!– Button trigger modal –>
<button data-toggle=“modal” data-target=“#myModal”>
Click here to show Modal
</button>
<!– Modal –>
<div id=“myModal” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true”>
<div class=“modal-dialog”>
<div class=“modal-content”>
<div class=“modal-header”>
<button type=“button” data-dismiss=“modal” aria-hidden=“true”>×</button>
<h4 class=“modal-title” id=“myModalLabel”>Subscribe for Updates</h4>
</div>
<div class=“modal-body”>
<form role=“form”>
<div class=“form-group”>
<label for=“exampleInputEmail1”>Enter Email</label>
<input type=“email” id=“email1” placeholder=“Email address”>
</div>
</form>
</div>
<div class=“modal-footer”>
<button type=“button” data-dismiss=“modal”>Close</button>
<button type=“button”>Subscribe</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Make sure to include the jQuery library and bootstrap.js or bootstrap.min.js file in the header section of the web document.
Bootstrap Modal example as page loads
Following example displays Modal window as the web page loads by using jQuery. The modal window is shown by using modal id “subscribeModal” in the jQuery document.ready() function.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
<!DOCTYPE html>
<html>
<head>
<title>Modal demo</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“#subscribeModal”).modal(‘show’);
});
</script>
</head>
<body>
<div>
<h1>Modal example</h1>
<!– Modal –>
<div id=“subscribeModal” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true”>
<div class=“modal-dialog”>
<div class=“modal-content”>
<div class=“modal-header”>
<button type=“button” data-dismiss=“modal” aria-hidden=“true”>×</button>
<h4 class=“modal-title” id=“myModalLabel”>Subscribe for Updates</h4>
</div>
<div class=“modal-body”>
<form role=“form”>
<div class=“form-group”>
<label for=“exampleInputEmail1”>Enter Email</label>
<input type=“email” id=“email1” placeholder=“Email address”>
</div>
</form>
</div>
<div class=“modal-footer”>
<button type=“button” data-dismiss=“modal”>Close</button>
<button type=“button”>Subscribe</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Invoking Modals by Data attribute and JavaScript
You can invoke Bootstrap Modal dialog by using data attribute or in the JavaScript. For example, in the button you can use data-target=”Modal_ID” to display a modal dialog window.
Similarly, you can call a modal dialog by its ID in JavaScript by using different options. Following examples display Modal via data attribute and JavaScript respectively.
Display Modal by data attribute example
As you click on the button “Show modal by Data Attribute”, the modal window will be shown as follows:
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<!DOCTYPE html>
<html>
<head>
<title>Modal demo</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>Modal example</h1>
<!– Button trigger modal –>
<button data-toggle=“modal” data-target=“#myModal”>
Show modal by Data Attribute
</button>
<!– Modal –>
<div id=“myModal” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true”>
<div class=“modal-dialog”>
<div class=“modal-content”>
<div class=“modal-header”>
<button type=“button” data-dismiss=“modal” aria-hidden=“true”>×</button>
<h4 class=“modal-title” id=“myModalLabel”>Subscribe for Updates</h4>
</div>
<div class=“modal-body”>
<form role=“form”>
<div class=“form-group”>
<label for=“exampleInputEmail1”>Enter Email</label>
<input type=“email” id=“email1” placeholder=“Email address”>
</div>
</form>
</div>
<div class=“modal-footer”>
<button type=“button” data-dismiss=“modal”>Close</button>
<button type=“button”>Subscribe</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Display Modal by JavaScript
Following example shows how to display modal dialog by JavaScript. You can see, as the button “Show modal by JavaScript/jQuery” is clicked, the click event of the button triggers the show method to display dialog by id.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Modal</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“#showdialog”).click(function() {
$(“#subscribeModal”).modal(‘show’);
});
});
</script>
</head>
<body>
<div>
<h1>Modal example</h1>
<!– Button trigger modal by JS–>
<button data-toggle=“modal” id=“showdialog”>
Show modal by JavaScript/jQuery
</button>
<!– Modal –>
<div id=“subscribeModal” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true”>
<div class=“modal-dialog”>
<div class=“modal-content”>
<div>
<button type=“button” data-dismiss=“modal” aria-hidden=“true”>×</button>
<h4 class=“modal-title” id=“myModalLabel”>Subscribe for Updates</h4>
</div>
<div class=“modal-body”>
<form role=“form”>
<div class=“form-group”>
<label for=“exampleInputEmail1”>Enter Email</label>
<input type=“email” id=“email1” placeholder=“Email address”>
</div>
</form>
</div>
<div class=“modal-footer”>
<button type=“button” data-dismiss=“modal”>Close</button>
<button type=“button”>Subscribe</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Useful Reading: Twitter Bootstrap Tutorial | Bootstrap Table | Bootstrap CSS | Bootstrap Form
Leave A Comment?