Question

如何在NO / YES状态下创建类似滑动按钮的iOS，在YES时打开模态窗口？

这可以通过bootstrap完成吗？

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

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状态true并显示模态

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

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

Fiddle

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

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

Fiddle With Modal Event Listener

否/是iOS喜欢按钮，模式为YES

1 个答案: