0

I am using Bootstrap Switch with a simple on/off option. How do I show a Bootstrap Modal asking for a confirmation once the user changes from on to off or from off to on?

Example 1 - User clicks to switch on. Modal: Are you sure you want to switch on?

Example 2 - User clicks to switch off. Modal: Are you sure you want to switch off?

I am able to set the modal on this jsfiddle but it's not working if the user clicks straight on the 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">
        This is the 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>
Matt
  • 4,462
  • 5
  • 25
  • 35
brunodd
  • 2,474
  • 10
  • 43
  • 66
  • 1
    Check [this](http://jsfiddle.net/nn6dU/23/) Fiddle if it works for you. – Patel Jul 10 '15 at 13:59
  • @Patel same issue. Click exactly on the on (blue area) or the off (grey area) it wouldn't work. check my fix in the answers – Coding Enthusiast Jul 10 '15 at 14:02
  • @CodingEnthusiast Ah right, I thought problem was with displaying dynamic modal body on clicks. I didn't pay attention to area where I am clicking.. LOL.. Good on you! :) – Patel Jul 10 '15 at 14:05

1 Answers1

1

I wonder why this issue. But I succeeded in creating a fix to your issue. Basically instead of allowing the div to target, you can listen to the switch event and use bootstrap's modal show/hide functions to show or hide your 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">
        This is the 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>
Coding Enthusiast
  • 3,865
  • 1
  • 27
  • 50
  • hi @CodingEnthusiast, I need the same function as this but Im using angularjs. I tried this into my code but it did not work. How can I possibly achieve this using angular? – bleyk Feb 22 '16 at 03:51
  • @brunodd, Its calling the same modal not for "are you sure to switch off?" and "are you sure to switch on?" did you do it? – bleyk Mar 22 '16 at 05:21
  • @bleykFaust it's calling two different modals. Basically it's a "Are you sure? Yes/No" modal. I'm not sure how to do it in Angular =( – brunodd Mar 22 '16 at 10:28
  • @bleykFaust raise a new question, tag me and i will come help. hope you some snippet of your code ready – Coding Enthusiast Mar 22 '16 at 18:50
  • @CodingEnthusiast thanks here is the link to my question http://stackoverflow.com/questions/35691225/modal-on-bs-switch-angularjs – bleyk Mar 23 '16 at 00:26