Bootstrap 3 - Switch

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="https://rawgit.com/nostalgiaz/bootstrap-switch/master/dist/css/bootstrap3/bootstrap-switch.min.css">
<script src="https://rawgit.com/Bttstrp/bootstrap-switch/master/dist/js/bootstrap-switch.js"></script>
<div>
    Change status:
    <input type="checkbox" class="switch" id="myswitch" data-backdrop="static" data-keyboard="false" 
    checked />
</div>

<!-- Modal -->
<div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Confirmation</h4>
      </div>
      <div class="modal-body">
        Are you sure you want to change this?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Confirm</button>
      </div>
    </div>
  </div>
</div>

CSS

.modal-backdrop {
  background: transparent;
}

JavaScript

$("#myswitch").bootstrapSwitch();

$('#myswitch').on('switchChange.bootstrapSwitch', function (e, data) {
   
        $('#myswitch').bootstrapSwitch('state', !data, true);
        $('#showModal').modal({
         backdrop: 'static',
         keyboard: false
     });

});

$(".modal-footer .btn-primary").click(function(){
    $('#myswitch').bootstrapSwitch('toggleState', true, true);
    $('#showModal').modal('hide')
})