try this
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function () {
var unsaved = false;
$(":input").change(function () {
unsaved = true;
});
$('#btnCancel').click(function () {
if (unsaved) {
var flag = confirm("Job Function Not Saved. Are you Sure you want to leave with out saving the data?");
if (flag)
$('#mymodal').modal('hide');
}
else
$('#mymodal').modal('hide');
});
});
</script>
</head>
<body>
<h4>Departments</h4>
<a class="btn btn-success" data-toggle="modal" data-target="#mymodal">
<span class="glyphicon glyphicon-eye-open"></span>View
</a>
<div class="modal fade" id="mymodal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button data-dissmiss="modal" class="close"><span>×</span> </button>
<div class="modal-title">My modal</div>
</div>
<div class="modal-body">
<input type="text" />
<input type="text" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="btnSubmit">Submit</button>
<button class="btn btn-default" id="btnCancel">Cancel</button>
</div>
</div>
</div>
</div>
</body>
</html>
demo :
Bootstrap Modal Cancel event - JSFiddle[
^]