jquery - Bootstrap toggle switch: Show modal on click -

i using bootstrap switch simple on/off option. how show bootstrap modal asking confirmation once user changes on off or off on?

example 1 - user clicks switch on. modal: are sure want switch on?

example 2 - user clicks switch off. modal: are sure want switch off?

i able set modal on jsfiddle it's not working if user clicks straight on blue or gray color.

<div data-toggle="modal" data-target="#showmodal">     change status:     <input type="checkbox" class="switch" 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">modal title</h4>       </div>       <div class="modal-body">         modal       </div>       <div class="modal-footer">         <button type="button" class="btn btn-default" data-dismiss="modal">close</button>         <button type="button" class="btn btn-primary">save changes</button>       </div>     </div>   </div> </div> 

i wonder why issue. succeeded in creating fix issue. instead of allowing div target, can listen switch event , use bootstrap's modal show/hide functions show or hide modal.

jsfiddle

javascript:

$(document).ready(function () {     $("#myswitch").bootstrapswitch();      $('#myswitch').on('switchchange.bootstrapswitch', function (e, data) {         $('#showmodal').modal('show');     }); }); 

html:

<div>     change status:     <input type="checkbox" class="switch" id="myswitch" 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">modal title</h4>       </div>       <div class="modal-body">         modal       </div>       <div class="modal-footer">         <button type="button" class="btn btn-default" data-dismiss="modal">close</button>         <button type="button" class="btn btn-primary">save changes</button>       </div>     </div>   </div> </div>