Twitter Bootstrapでモーダルクロージングイベントを処理する方法は?

フーマン

Twitterブートストラップで、モーダルのドキュメントを確認します。モーダルのクローズイベントをリッスンして関数を実行する方法があるかどうかわかりませんでした。

たとえば、このモーダルを例として取り上げましょう。

<div class="modal-header">
    <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
    <a href="#" class="btn close_link" data-dismiss="modal">Close</a>   
</div>

上部のXボタンと下部の閉じるボタンはどちらも、のためにモーダルを非表示/閉じることができますdata-dismiss="modal"だから、どういうわけかそれを聞くことができるのだろうか?

あるいは、このように手動で行うこともできます...

$("#salesitems_modal").load(url, data, function() { 
     $(this).modal('show'); 
     $(this).find(".close_link").click(modal_closing);
});

どう思いますか?

albertedevigo

Bootstrap3および4用に更新

Bootstrap3およびBootstrap4のドキュメントでは、使用できる2つのイベントについて説明しています。

hide.bs.modal:このイベントは、hideインスタンスメソッドが呼び出されたときにすぐに発生します。
hidden.bs.modal:このイベントは、モーダルがユーザーからの非表示を終了したときに発生します(CSS遷移が完了するのを待ちます)。

そして、それらの使用方法の例を提供します。

$('#myModal').on('hidden.bs.modal', function () {
  // do something…
})

レガシーブートストラップ2.3.2の回答

Bootstrapのドキュメントには、使用できる2つのイベントが記載されています。

hide:このイベントは、hideインスタンスメソッドが呼び出されたときにすぐに発生します。
hidden:このイベントは、モーダルがユーザーからの非表示を終了したときに発生します(css遷移が完了するのを待ちます)。

そしてそれらを使用する方法の例を提供します:

$('#myModal').on('hidden', function () {
    // do something…
})

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Twitter BootstrapをAngular2プロジェクトにインストールする方法は?

分類Dev

VS2012での単純なNugetインストールからMVC4Twitter Bootstrapプロジェクトの失敗を解決する方法は?

分類Dev

TwitterのFabricSDKをAndroidプロジェクトから完全にアンインストールする方法は?

分類Dev

TwitterのFabricSDKをAndroidプロジェクトから完全にアンインストールする方法は?

分類Dev

Firebase (Web) twitter 認証がログインページにリダイレクトする (React を使用)

分類Dev

コンテンツに基づいてTwitter Bootstrapモーダルのサイズを動的に変更する方法

分類Dev

AndroidのTwitterでFirebaseログイン、メールを追加する方法

分類Dev

Twitterブートストラップをモーダルフルスクリーンにする方法

分類Dev

Twitterブートストラップモーダル:スライドダウン効果を削除する方法

分類Dev

Twitter Bootstrap:モーダルダイアログタブ

分類Dev

Twitter Bootstrapを使用してモーダル/ダイアログで削除を確認しますか?

分類Dev

Pythonでtwitter4jpackage(java)の代替をインストールする方法は?

分類Dev

Twitter Bootstrapドロップダウンのイベントハンドラー?

分類Dev

リクエストモジュールを使用してPython経由でjsonでTwitterハンドルを印刷する方法は?

分類Dev

Twitter Bootstrapを使用して、1ページ内で複数のモーダルダイアログを開きます

分類Dev

npmを介してTwitter Bootstrapをインストールする目的は?

分類Dev

npmを介してTwitter Bootstrapをインストールする目的は?

分類Dev

Owin Twitterログイン-検証手順によると、リモート証明書は無効です

分類Dev

Owin Twitterログイン-検証手順によると、リモート証明書は無効です

分類Dev

ツイートの作成中にTwitterユーザープロファイルリンクを挿入する方法

分類Dev

TwitterコールバックURLエラーでログイン

分類Dev

KotlinでTwitterログイン

分類Dev

rspec内でTwitterストリーミングクライアントの呼び出しをモックするにはどうすればよいですか?

分類Dev

twitteRパッケージを使用して拡張(280文字)ツイートを処理する方法

分類Dev

Twitterテキストのクリーニングを最適化する方法は?

分類Dev

流星アカウントでTwitterのプロフィール情報を取得する方法-twitter?

分類Dev

Twitter Bootstrapモーダルを動的に構築する

分類Dev

ローカルホストでのログインTwitterログイン

分類Dev

Twitter API:プロモートまたはスポンサー付きツイートを含むタイムラインを取得する方法は?

Related 関連記事

  1. 1

    Twitter BootstrapをAngular2プロジェクトにインストールする方法は?

  2. 2

    VS2012での単純なNugetインストールからMVC4Twitter Bootstrapプロジェクトの失敗を解決する方法は?

  3. 3

    TwitterのFabricSDKをAndroidプロジェクトから完全にアンインストールする方法は?

  4. 4

    TwitterのFabricSDKをAndroidプロジェクトから完全にアンインストールする方法は?

  5. 5

    Firebase (Web) twitter 認証がログインページにリダイレクトする (React を使用)

  6. 6

    コンテンツに基づいてTwitter Bootstrapモーダルのサイズを動的に変更する方法

  7. 7

    AndroidのTwitterでFirebaseログイン、メールを追加する方法

  8. 8

    Twitterブートストラップをモーダルフルスクリーンにする方法

  9. 9

    Twitterブートストラップモーダル:スライドダウン効果を削除する方法

  10. 10

    Twitter Bootstrap:モーダルダイアログタブ

  11. 11

    Twitter Bootstrapを使用してモーダル/ダイアログで削除を確認しますか?

  12. 12

    Pythonでtwitter4jpackage(java)の代替をインストールする方法は?

  13. 13

    Twitter Bootstrapドロップダウンのイベントハンドラー?

  14. 14

    リクエストモジュールを使用してPython経由でjsonでTwitterハンドルを印刷する方法は?

  15. 15

    Twitter Bootstrapを使用して、1ページ内で複数のモーダルダイアログを開きます

  16. 16

    npmを介してTwitter Bootstrapをインストールする目的は?

  17. 17

    npmを介してTwitter Bootstrapをインストールする目的は?

  18. 18

    Owin Twitterログイン-検証手順によると、リモート証明書は無効です

  19. 19

    Owin Twitterログイン-検証手順によると、リモート証明書は無効です

  20. 20

    ツイートの作成中にTwitterユーザープロファイルリンクを挿入する方法

  21. 21

    TwitterコールバックURLエラーでログイン

  22. 22

    KotlinでTwitterログイン

  23. 23

    rspec内でTwitterストリーミングクライアントの呼び出しをモックするにはどうすればよいですか?

  24. 24

    twitteRパッケージを使用して拡張(280文字)ツイートを処理する方法

  25. 25

    Twitterテキストのクリーニングを最適化する方法は?

  26. 26

    流星アカウントでTwitterのプロフィール情報を取得する方法-twitter?

  27. 27

    Twitter Bootstrapモーダルを動的に構築する

  28. 28

    ローカルホストでのログインTwitterログイン

  29. 29

    Twitter API:プロモートまたはスポンサー付きツイートを含むタイムラインを取得する方法は?

ホットタグ

アーカイブ