0

シンプルなオン/オフ オプションでBootstrap Switchを使用しています。onユーザーが からに、offまたは からoffに変更されたときに確認を求める Bootstrap Modal を表示するにはどうすればよいonですか?

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

1 に答える 1

1

なぜこの問題が発生するのだろうか。しかし、問題の修正に成功しました。基本的に、div のターゲットを許可する代わりに、switch イベントをリッスンし、ブートストラップのモーダル表示/非表示機能を使用してモーダルを表示または非表示にすることができます。

ジャスフィドル

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>
于 2015-07-10T13:57:41.750 に答える