ホームページ ウェブフロントエンド jsチュートリアル ブートストラップ モーダルの rootElement を修正

ブートストラップ モーダルの rootElement を修正

Dec 15, 2024 pm 10:30 PM

Fix Bootstrap  modal

Bootstrap 5.3 モーダルを body 以外のコンテナ内に配置する場合、Bootstrap の

Backdrop のソース コードには次の部分があります:

ただし、rootElement をカスタマイズするメカニズムは提供されていません

bootstrap.bundle.js バージョン v5.3.3 で以下のように修正しました

  1. クラス Backdrop が Config を拡張しているのを見つけて、_configAfterMerge(config) を見つけます。
  2. config.rootElement = ... を config.rootElement = getElement(config.rootElement) に置き換えます ||ドキュメント.ボディ; rootElement が見つからない場合、with は body にフォールバックします。 getElement() から null が返されました:
  1. クラス Modal が BaseComponent を拡張していることを見つけます。そこに _initializeBackDrop()
  2. isAnimated: this._isAnimated() の後に新しいプロパティ rootElement: this._config.rootElement: を追加します。

新しいブートストラップでブートストラップを初期化する場合、rootElement: <コンテナ: HTMLElement as object or string selector> を追加します。例:

これが SPA での私の使用法です。

// SPA に動的モーダルがあるので、モーダルをレンダリングしています
// まず DocumentFragment 内でこのモーダル オブジェクトを保存します
// 変数に入れて、close() のように後でモーダルのメソッドを呼び出せるようにします

定数値 = {
    モーダル: {
        ID: 'my-modal',
        オブジェクト: null
    }
}

const フラグメント = document.createRange().createContextualFragment(
    `<div>




          </div>

            
        

以上がブートストラップ モーダルの rootElement を修正の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットAIツール

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

node.jsでHTTPリクエストを作成する方法は? node.jsでHTTPリクエストを作成する方法は? Jul 13, 2025 am 02:18 AM

node.jsでHTTPリクエストを開始するには、組み込みモジュール、axios、およびnode-fetchを使用する3つの一般的な方法があります。 1.依存関係のない内蔵http/httpsモジュールを使用します。これは基本的なシナリオに適していますが、https.get()を使用してデータを取得したり、.write()を介してPOSTリクエストを送信するなど、データステッチとエラーモニタリングの手動処理が必要です。 2.Axiosは、約束に基づいたサードパーティライブラリです。簡潔な構文と強力な機能を備えており、非同期/待ち声、自動JSON変換、インターセプターなどをサポートします。非同期リクエスト操作を簡素化することをお勧めします。 3.Node-Fetchは、約束と単純な構文に基づいて、ブラウザフェッチに似たスタイルを提供します

JavaScriptデータ型:プリミティブ対参照 JavaScriptデータ型:プリミティブ対参照 Jul 13, 2025 am 02:43 AM

JavaScriptデータ型は、プリミティブタイプと参照タイプに分割されます。プリミティブタイプには、文字列、数字、ブール、ヌル、未定義、シンボルが含まれます。値は不変であり、コピーは値を割り当てるときにコピーされるため、互いに影響を与えません。オブジェクト、配列、関数などの参照タイプはメモリアドレスを保存し、同じオブジェクトを指す変数は互いに影響します。 TypeofとInstanceOFを使用してタイプを決定できますが、TypeOfNullの歴史的な問題に注意してください。これらの2種類の違いを理解することは、より安定した信頼性の高いコードを書くのに役立ちます。

JavaScript Timeオブジェクト、誰かがEACTEXE、Google Chromeなどのより高速なWebサイトを構築します。 JavaScript Timeオブジェクト、誰かがEACTEXE、Google Chromeなどのより高速なWebサイトを構築します。 Jul 08, 2025 pm 02:27 PM

こんにちは、JavaScript開発者!今週のJavaScriptニュースへようこそ!今週は、DenoとのOracleの商標紛争、新しいJavaScript Timeオブジェクトがブラウザ、Google Chromeアップデート、およびいくつかの強力な開発ツールによってサポートされています。始めましょう! 「JavaScript」の商標を登録しようとするDeno Oracleの試みとのOracleの商標紛争は、論争を引き起こしました。 Node.jsとDenoの作成者であるRyan Dahlは、商標をキャンセルするために請願書を提出しました。

キャッシュAPIとは何ですか?また、サービスワーカーでどのように使用されますか? キャッシュAPIとは何ですか?また、サービスワーカーでどのように使用されますか? Jul 08, 2025 am 02:43 AM

Cacheapiは、ブラウザからネットワークリクエストをキャッシュするツールです。これは、ウェブサイトのパフォーマンスとオフラインエクスペリエンスを改善するために、サービスワーカーと併用することがよくあります。 1.開発者は、スクリプト、スタイルシート、写真などのリソースを手動で保存できるようにします。 2。要求に応じてキャッシュ応答と一致させることができます。 3.特定のキャッシュの削除またはキャッシュ全体のクリアをサポートします。 4.フェッチイベントを聞いているサービスワーカーを介して、キャッシュの優先順位またはネットワークの優先戦略を実装できます。 5.オフラインサポート、繰り返しのアクセス速度の高速化、主要なリソースのプリロード、バックグラウンドアップデートコンテンツによく使用されます。 6.それを使用する場合、キャッシュバージョンの制御、ストレージ制限、およびHTTPキャッシングメカニズムとの違いに注意する必要があります。

ハンドリングの約束:javascriptのチェーン、エラー処理、および約束の組み合わせ ハンドリングの約束:javascriptのチェーン、エラー処理、および約束の組み合わせ Jul 08, 2025 am 02:40 AM

約束は、JavaScriptで非同期操作を処理するためのコアメカニズムです。チェーンコール、エラー処理、コンビナーの理解は、アプリケーションをマスターするための鍵です。 1.チェーンコールは、.then()を通じて新しい約束を返し、非同期プロセスの連結を実現します。それぞれ.then()は以前の結果を受け取り、値または約束を返すことができます。 2。エラー処理は、.catch()を使用して例外をキャッチしてサイレント障害を回避し、キャッチのデフォルト値を返すためにプロセスを継続する必要があります。 3。promise.all()などの組み合わせ(すべての成功後にのみ成功しました)、promise.race()(最初の完了が返されます)、promise.allsettled()(すべての完了を待っています)

JavaScriptでのデータ操作のためのArray.Prototypeメソッドを活用します JavaScriptでのデータ操作のためのArray.Prototypeメソッドを活用します Jul 06, 2025 am 02:36 AM

.map()、.filter()、.reduce()などのJavaScriptアレイ内蔵メソッドは、データ処理を簡素化できます。 1).map()は、要素を1つに変換して新しい配列を生成するために使用されます。 2).filter()は、条件ごとに要素をフィルタリングするために使用されます。 3).reduce()は、データを単一の値として集約するために使用されます。使用すると誤用を避ける必要があり、その結果、副作用やパフォーマンスの問題が発生します。

JSラウンドアップ:JavaScriptイベントループに深く潜り込む JSラウンドアップ:JavaScriptイベントループに深く潜り込む Jul 08, 2025 am 02:24 AM

JavaScriptのイベントループは、コールスタック、WebAPIS、およびタスクキューを調整することにより、非同期操作を管理します。 1.コールスタックは同期コードを実行し、非同期タスクに遭遇すると、処理のためにWebAPIに引き渡されます。 2。WebAPIがバックグラウンドでタスクを完了した後、コールバックを対応するキュー(マクロタスクまたはマイクロタスク)に入れます。 3.イベントループは、コールスタックが空であるかどうかをチェックします。空の場合、コールバックはキューから取り出され、実行のためにコールスタックに押し込まれます。 4.マイクロタスク(Promise.thenなど)は、マクロタスク(SettimeOutなど)より優先されます。 5.イベントループを理解するには、メインスレッドのブロックを避け、コード実行順序を最適化するのに役立ちます。

JavaScript DOMイベントでのイベントの泡立ちとキャプチャの理解 JavaScript DOMイベントでのイベントの泡立ちとキャプチャの理解 Jul 08, 2025 am 02:36 AM

イベントの泡は、ターゲット要素から祖先ノードに外側に伝播し、イベントキャプチャは外側の層からターゲット要素に内側に伝播します。 1。イベントバブル:子要素をクリックした後、イベントは親要素のリスナーを上向きにトリガーします。たとえば、ボタンをクリックした後、最初に保育を出してから、親クリックしました。 2。イベントキャプチャ:3番目のパラメーターをtrueに設定して、リスナーが[親子要素のキャプチャリスナー]をクリックする前に[親要素のキャプチャリスナーをトリガーするなど、キャプチャステージで実行されるようにします。 3.実用的な用途には、子どもの要素イベントの統一された管理、傍受前処理、パフォーマンスの最適化が含まれます。 4. DOMイベントストリームは、キャプチャ、ターゲット、バブルの3つの段階に分割され、デフォルトのリスナーはバブルステージで実行されます。

See all articles