[解決済み] Bootstrapでdata-dismiss属性がどのように機能するかを理解する
2022-03-12 06:05:34
質問
Bootstrapの初心者なのですが、このサンプルで問題に直面しています。
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
私の理解では
data-dismiss="modal"
属性は、クリックすればモーダルを閉じるはずですが、その裏側でどのように動作しているのか理解していません。公式のドキュメントを確認したところ
http://getbootstrap.com/javascript/#modals-examples
が、何の説明もない。
解決方法は?
非表示機能を実装しているのは
modal.js
このように
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
の属性を持つ要素を見つけるだけです。
data-dismiss
であり、値が
modal
. クリックすると、これらの要素が非表示になります。
関連
-
[解決済み] テスト
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] jQueryを使用してハイパーリンクのhref属性を変更する方法
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] jQueryでdata属性で要素を選択する
-
[解決済み] jQuery データ属性の値に基づいて要素を検索する方法は?
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] data-id属性を取得するにはどうすればよいですか?
-
[解決済み] BootstrapのモーダルウィンドウをjQueryで開くには?
-
[解決済み] ブートストラップ・モーダルにデータを渡す
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】node.js TypeError: path must be absolute or specify root to res.sendFile [JSONのパースに失敗しました]。
-
[解決済み】「Uncaught TypeError: Chromeで "Illegal invocation "が発生する。
-
[解決済み】SyntaxError: 'import' と 'export' は 'sourceType: module' とだけ表示されるかもしれない - Gulp
-
[解決済み】未定義のプロパティ 'bind' を読み込めない。React.js【重複あり
-
[解決済み】JavaScript ランタイムエラー:'$'が未定義です。
-
[解決済み】FirefoxでGoogle Maps V3をリモートで使用すると「googleが定義されていません」と表示される。
-
[解決済み】 \u003C とは何ですか?
-
[解決済み】未定義のプロパティ 'forEach' を読み取ることができない
-
[解決済み】JavaScriptで関数が存在するかどうかを確認する方法は?
-
[解決済み] [Solved] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングする