NO/YES iOS like 按钮，模式为 YES答案

【问题标题】：NO/YES iOS like button with modal on YESNO/YES iOS like 按钮，模式为 YES
【发布时间】：2016-02-07 08:28:11
【问题描述】：

如何创建类似 iOS 的具有 NO/YES 状态的滑动按钮，当它为 YES 时打开模式窗口？

这可以用引导程序完成吗？

我找到了可以使用的代码，但我需要有人编辑 JS 代码，以便仅在按钮 YES 状态下显示模态。

Fiddle

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>

 $(document).ready(function() {
   $("#myswitch").bootstrapSwitch();

   $('#myswitch').on('switchChange.bootstrapSwitch', function(e, data) {
     $('#showModal').modal('show');
   });
 });

【问题讨论】：

能否请您详细说明您展示代码必要部分的努力？
现在不行，因为我在手机上。

标签： twitter-bootstrap button modal-dialog bootstrap-switch

【解决方案1】：

是的，它可以通过引导程序完成，

添加数据属性data-off-text="No" data-on-text="Yes"替换OFF和ON

<div>
  Change status:
  <input type="checkbox" class="switch" id="myswitch" checked="" data-off-text="No" data-on-text="Yes"/>
</div>

您只需要检查bootstrap switch 状态，如果true 并显示模态框

$(document).ready(function() {
    $("#myswitch").bootstrapSwitch();

    $('#myswitch').on('switchChange.bootstrapSwitch', function(event, state) {
        if (state == true) {
            $('#showModal').modal('show');
        }
    });
});

Fiddle

旁注：当使用 boostrap 模态事件侦听器关闭模态时，引导开关的 state 可选地重置为 false，所以不需要点击开关来重置它的状态。

    $('#showModal').on('hide.bs.modal', function() {
        $("#myswitch").bootstrapSwitch('state', false, true);
    });

Fiddle With Modal Event Listener

【讨论】：

非常感谢，这正是我需要的。