モーダルCssJavascript

| | | | | | | | | | | | | | | | | | | | | |

モーダルは、Webページのメインウィンドウとは別のウィンドウです。主な目的は、メインのユーザーインタラクションウィンドウをオフにして、ユーザーに確認する情報や何かを共有することです。モーダルウィンドウは、ログインコンポーネント、ユーザー入力の確認、またはその他の多くの用途として一般的に使用されます。

ブートストラップは、コンポーネントを非常に迅速に構築するのに役立つフレームワークです。この記事では、Bootstrapを構成する方法、モーダルが必要な理由、およびBootstrapフレームワークを使用した実際のモーダルの例をいくつか見ていきます。

はじめに

Webページにモーダルが表示されるようにするには、適切な依存関係があることを確認してください。このプロジェクトには、Bootstrap、Popper.JS、jQueryが必要です。すべてを取得するには、Bootstrapクイックスタートページに移動してください。依存関係。

必要なパッケージを接続する方法はあなた次第ですが、最も簡単で初心者に優しいのは、jQuery、Popper.js、およびBootstrapにコンテンツ配信ネットワーク(CDN)を使用することです。 <! --popper.jsCDN2番目-> <! -3番目のCDNブートストラップ->

上記のコードエディターでは、CSSを使用してボタンのスタイルとモーダルの背景を変更しました。この例では、Bootstrapがすでに提供しているCSSを!を使用してオーバーライドする代わりに、カスタムクラス名を追加しました。重要なキーワード。

結論

Bootstrapを使用してモーダルを作成する際の主な障害は、ドキュメントは適切に準備されています。エラーが発生した場合は、コピー/貼り付けエラー、HTMLの頭/本文のCDNまたはシートスタイルの位置のエラー、またはCSSは正しい要素をターゲットにしていません。

これらのスタイルの一部はtryでカスタム化されています。大きなエラーは、Bootstrapのドキュメントが非常に包括的であるということです。この前にパッケージ化すると、ドキュメントが十分に大きく、理解するのがかなり簡単であることが幸運です。