ホームページ >ウェブフロントエンド >CSSチュートリアル >外側をクリックしたときにブートストラップモーダルが閉じないようにするにはどうすればよいですか?

外側をクリックしたときにブートストラップモーダルが閉じないようにするにはどうすればよいですか?

Susan Sarandon
Susan Sarandonオリジナル
2024-11-13 02:03:02909ブラウズ

How to Prevent Bootstrap Modals from Closing When Clicking Outside?

ブートストラップ領域の外側をクリックしてモーダル クロージャを無効にする方法

ブートストラップ モーダルでは、ユーザーがクリックしたときに意図しないモーダル クロージャが発生する不便が発生する可能性があります。モーダルウィンドウの外側。この問題を解決してユーザー エクスペリエンスを向上させるには、この機能をグローバルに、または特定のモーダルに対して個別に無効にすることができます。

グローバル無効化

外側をクリックしてモーダル クロージャーを無効にするにはすべてのモーダルについて、モーダル初期化オプション オブジェクトの「背景」オプションを変更できます。 「静的」に設定すると、境界の外側をクリックしたときにモーダルが閉じるのを防ぎます。

特定のモーダル無効化

次のモーダル クロージャーを選択的に無効にしたい場合は、特定のモーダルでは、JavaScript またはデータ属性のいずれかを使用できます。

使用JavaScript:

$('#myModal').modal({backdrop: 'static', keyboard: false})

データ属性の使用:

<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
</button>

data-backdrop="static" 属性を追加すると、「backdrop」が無効になります」。さらに、data-keyboard="false" 属性により、「Esc」キーを押してモーダルを閉じることができなくなります。

以上が外側をクリックしたときにブートストラップモーダルが閉じないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。