Question

我正在使用Bootstrap Switch和一个简单的开/关选项。一旦用户从on更改为off或从off更改为on，如何显示要求确认的Bootstrap模式？

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

我想知道为什么会这个问题。但我成功地为您的问题创建了一个修复程序。基本上不是让div定位，你可以听取switch事件并使用bootstrap的模态显示/隐藏功能来显示或隐藏你的模态。

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>

Bootstrap切换开关：单击时显示模态

1 个答案:

Jsfiddle