web-dev-qa-db-ja.com

Bootstrap Modalで終了イベントをキャプチャします

イベントを選択するためのBoostrap Modalがあります。ユーザーがXボタンまたはモーダルの外側をクリックすると、デフォルトイベントに送信したいと思います。これらのイベントをキャプチャするにはどうすればよいですか?

これは私のコードです:

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content event-selector">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <center><h1 class="modal-title event-selector-text">Select an Event</h1><center>
      </div>
      <div class="container"></div>
      <div class="modal-body">
      <div class="event-banner">
        <a href="/?event=1"><img src=<?php echo IMAGES_EVENT1_LOGO; ?> width="100%"></a>
      </div>
      <div class="event-banner">
        <a href="/?event=2"><img src=<?php echo IMAGES_EVENT2_LOGO; ?> width="100%"></a>
      </div>
      </div>
    </div>
  </div>
</div>
53
Arturo

これは、別のstackoverflow記事関数をTwitterにバインドBootstrap Modal Closeと非常に似ています。 Bootstap v3またはv4のバージョンを使用していると仮定すると、次のようなことができます。

$("#myModal").on("hidden.bs.modal", function () {
    // put your default event here
});
134
cfnerd

ただし、別のスタックオーバーフローの質問で回答されています Twitterに関数をバインドするBootstrap Modal Close .

ソース: http://getbootstrap.com/javascript/#modals-events

13
vibs2006

私はそれを使用しようとしましたが、動作しませんでした。それは単なるモーダルバージョンです。

ただし、次のように機能しました。

$("#myModal").on("hide.bs.modal", function () {
    // put your default event here
});

答えを更新するだけ=)

9