NO/YES iOS 点赞带有模式的按钮

Question

如何创建 iOS 状态为 NO/YES 的滑动按钮，当它处于 YES 时打开模态 window？

这可以用 bootstrap 完成吗？

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

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>

JS

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

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

Answer 1

是的，可以用 bootstrap、

来完成

添加数据属性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 状态 if true 并显示模态

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

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

Fiddle

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

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

Fiddle With Modal Event Listener

NO/YES iOS 点赞带有模式的按钮

NO/YES iOS like button with modal on YES

twitter-bootstrap

button

modal-dialog

bootstrap-switch