1

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

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

我找到了可以使用的代码，但我需要有人编辑 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');
   });
 });
4

1 回答 1

2

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

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');
        }
    });
});

小提琴

旁注：可选地，statebootstrap 开关重置为false当模式关闭时使用 boostrap 模式事件侦听器，因此无需单击开关来重置其状态。

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

摆弄模态事件监听器

于 2016-02-08T19:10:35.213 回答