"TEST: Understanding events"
Bootstrap 3.1.0 Snippet by mrmccormack

Post to Facebook Tweet this

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h1>TEST: Understanding events</h1>
<h2>Basic JavaScript method</h2>
<p>
There is no onClick event in HTML, that event is in JS file.
</p>
<button id="btnTest" class="btn btn-primary">Say Hello!</button>
<hr>
<div id="demo" class="btn-danger">Waiting...</div>
<hr>
<h2>Twitter Bootstrap 3 modal dialog alert</h2>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- set up the modal to start hidden and fade in and out -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- dialog body -->
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">×</button>
Hello world!
</div>
<!-- dialog buttons -->
<div class="modal-footer"><button type="button" class="btn btn-primary" data-dismiss="modal">OK</button></div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
$(function() {
// this is the jQuery function if testButton is clicked
$('#btnTest').click(function() {
var s;
var r = confirm("Press a button!");
if (r == true) {
s = "You pressed OK!";
} else {
s = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = s;
});
$('#btnTest1').click(function() {
bootbox.alert("Hello world!");
console.log("button pressed"); // just as an example...
});
});
// ---- Modal
$("#myModal").on("show", function() { // wire up the OK button to dismiss the modal when shown
$("#myModal a.btn").on("click", function(e) {
alert('You closed it'); //??? this no work, never fires ???
console.log("button pressed"); // just as an example... req firebug
$("#myModal").modal('hide'); // dismiss the dialog
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Argon Dashboard
Understanding Responsive Utilities

Questions / Comments: