jquery - Bootstrap 切换开关：点击时显示模式

Question

我正在使用带有简单开/关选项的Bootstrap Switch 。on一旦用户从tooff或 from offto更改，如何显示 Bootstrap Modal 要求确认on？

示例 1 - 用户点击切换on。 模态： Are you sure you want to switch on?

示例 2 - 用户点击切换off。 模态： Are you sure you want to switch off?

我可以在这个jsfiddle上设置模式，但如果用户直接点击蓝色或灰色，它就不起作用。

<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>

Answer 1

我想知道为什么会出现这个问题。但我成功地解决了您的问题。基本上，您可以收听 switch 事件并使用引导程序的模态显示/隐藏功能来显示或隐藏您的模态，而不是允许 div 定位。

提琴手

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>