最近、fullstack Rubyアプリの作成からJavascriptの操作へのジャンプを行いました。 既にご存知のように、Javascriptを使用すると、ユーザーまたはクライアントはwebページと対話し、ユーザーの対話性に基づいて新しいコンテンツをDOMに動的にレンダ Ruby on Railsのコーディング（すべてのrerenderにはページ全体の更新が必要です）と比較して、Javascriptとのユーザーのやりとりに基づいてさまざまなページ要素をrerenderする能力は、1994年から現在に至るまでの私のフロントエンド開発スキルをもたらしました。 Javascriptの私の初歩的な理解で、私は今、私は私のプロジェクトで実装することを楽しみにしてきた対話型のweb要素を作成することができます：メッセージボッ
モーダル、またはダイアログボックスは、指定されたユーザーの対話性の後にブラウザに表示されるメッセージボックスです。 HTML、CSS、およびJavascriptを使用してサイトのモーダルボックスを作成する詳細について説明する前に、最初に遭遇する可能性のあるさまざまなタイプのメッセー
Alerts
アラートは、通常、ブラウザ内でロックされたメッセージボックスであり、ユーザーの応答または操作が必要であり、却下されてページから消えま おそらく、あなたは、クライアントが情報（利用規約）を確認したいか、ページ自体がフォームの完了を確認しています。 ただし、アラートが解除されるまで、クライアントはページの残りの部分と対話することはできません。Div>
popup
ポップアップは、即時の相互作用や注意を必要としないブラウザに表示される粘着性のある（キャンディのように粘着性ではなく、ページに”スティック”と思う）メッセージボックスです。 ユーザーがそれらを非表示にしたい場合は、その時点でポップアップを閉じるか操作する必要がありますが、ページの残りの部分の対話性はまだ機能し 通知はポップアップの一例です。
Growl Notification/Flash Notice
A growl notification is a popup that dismisses itself after an associated period of time. These are sometimes also referred to as flash notices. ユーザーは、おそらくメッセージボックスを早期に閉じるために、または通知内のボタンをクリックするために、うなり声の通知と対話することができま ポップアップのように、growl通知は、クライアントがページの残りの部分と対話し続けることを可能にします。 この例は、電子メールまたはソーシャルメディアの通知です。div>
ライトボックスまたは劇場は、通常、ユーザーがそれに焦点を当てるために、ブラウザで既に利用可能だったコンテンツを拡大するメッセージボックスです。 一般的な使用例は、画像、またはギャラリーに表示される一連の画像です。 ライトボックスやシアターが複数のコンテンツで使用されている場合、ユーザーが元のページに戻り、その後シリーズの次の画像をクリックして拡大するのではなく、ライトボックス自体内の関連するコンテンツをナビゲートできる場合、それは”ロックされている”とみなされます。
popover/hovercard
小さなメッセージボックスの一つ、popoverまたはhovercardは、ユーザーが選択した領域の上にマウスを置いたときにのみ画面に表示されます。 これらのメッセージボックスには、ユーザーが現在マウスオーバーしているボタンまたはコンテナに関する説明や説明を含めることができます; また、ユーザーがリンクをクリックした場合に利用可能な情報のプレビューが含まれている場合があります。Div>
modal/dialog box
最後に、モーダルまたはダイアログボックスは、ブラウザの現在のコンテンツから移動することなく、ページのさらなる対話 モーダルボックスは画面にロックされていません（つまり、 これは、通常、（ボックスのスタイルに基づいて）ユーザーの焦点ですが、クライアントは必要な対話なしでそれから離れることができます。 ほとんどの場合、ユーザーがモーダルを閉じたい場合は、提供されたボタンでボックスを閉じるか、モーダルの外側をクリックするだけです。 モーダルの例は、ユーザーがフォームに入力したり、検索クエリの特定の情報を提供したりする必要があるが、別のページに移動したくない場合です。div>
モーダルの実装
ページにモーダルを作成して実装するには、機能のために完了する必要がある三つのステップがあります。
- html:markup to create the modal element
- css:styling to determine how your modal looks and appears on the page
- javascript: ユーザーの対話性に応じてモーダルが表示/非表示になるようにイベントリスナーを配置する
HTML
最も単純なモーダルのためには、ユーザーがモーダル、実際のモーダルをアクティブにするためにクリックできるボタン（または任意のページ要素）が必要です。モーダル内に閉じるボタンを実装する必要があります。上記では、html内に表示されるボタンとモーダルがあり、3つのCSSクラスがあることがわかります。modalmodal-btnclose-btn。 これらのそれぞれは、以下のCSSに含まれます。 最初のdivは、modalのクラスを持つモーダル全体を含む親コンテナです。 内部的には、モーダル自体のコンテンツを含むdivがあります：spanpタグ内のテキスト。簡単に言えば、html内にdivを作成し、スタイルを設定するためにCSSクラスを追加するだけで、モーダルにヘッダーとフッターを実装することもできます。 例えば:単純なモーダルのHTMLの各要素のスタイルを設定するには、関連するCSSクラスを作成する必要があります。.modal.modal-content.close-btn….. さらに、モーダル用のアニメーションを作成するためのCSSも含まれていることを下に見ることができます。上記のクラスでは、HTMLで作成した各要素のスタイルを設定しています。p>
.modalクラス自体には、モーダル自体の背後にあるページをどのように扱うかを決定する属性があります: ダイアログボックスの背後にあるページと比較した幅と高さ、色（この例では半不透明なグレーを使用しています）、可視性設定により、ユーザーがボタンをクリッ
実際のダイアログボックスでは、.modal-contentにも個別のスタイリングがあります：背景スタイリング、ダイアログボックス自体の背景色、パッさらに、’x’を右に浮動させる.close-btn.close-btn:hoverを使用すると、ユーザーが閉じるボタンの上にマウスを置くと、色が変 わかりやすくするために、ユーザーは、閉じるボタンをクリックするのと同じように、モーダルの外側をクリックしてダイアログボッ Javascriptで両方のオプションのイベントリスナーを作成します。これは、あなた自身で実装できるCSSの表面をほとんど傷つけません。
あなた自身のニーズに最も合うように上記のコードを自由に調整してください。最後に、モーダルの機能を作成するためにいくつかのJavascriptを記述する必要があります。HTMLからいくつかのオブジェクトを選択し、変数に割り当てました：amodal-btnmodalclose-btnonclickmodal-btn"block”close-btnまたはモーダルの外側のウィンドウ（スタイ/div>. これにより、modal-btnを再度クリックするまでモーダルが効果的に非表示になります。Div>
全体的に、javascriptでdomを使って遊ぶことは、最初のコーダーとして信じられないほど楽しく、やりがいのあるものでした。 うまくいけば、上記のコードは、あなた自身でもモーダルとメッセージボックスを実装するのに役立ちます。 いくつかの簡単なグーグルで、あなたはまた、あなたのユースケースのためのモダールやダイアログボックスを調整するためのさらなるリソースを見つけることができます。そこに幸運、そして幸せなコーディング！