HTML5およびCSS3でモーダルウィンドウを作成します。 jQueryポップアップモーダルの作成

3.リンクによって呼び出されるjQueryモーダルの例（デモ付き）

ほとんどの場合、インターネット上でポップアップモーダルウィンドウ（登録の確認、警告、ヘルプ情報、ファイルのダウンロードなど）をすでに見たことがあるでしょう。このチュートリアルでは、最も単純なモーダルウィンドウを作成する方法の例をいくつか紹介します。

シンプルなモーダルポップアップを作成する

すぐに表示される最も単純なモーダルウィンドウのコードの検討を始めましょう
jqueryコード

の任意の場所にコードを貼り付けます体あなたのページ。コマンドを使用せずにページを読み込んだ直後に、次のようなウィンドウが表示されます。

ただし、次のコードは、ブラウザにページ全体を読み込んだ後に実行されます。この例では、画像を含むページを読み込んだ後、単純なポップアップウィンドウがポップアップ表示されます。

CSSを使用したリンクからjQueryモーダルを呼び出す

次のステップは作成することです モーダルウィンドウリンクをクリックしたとき。背景はゆっくりと暗くなります。

ログインフォームと登録フォームがこのようなウィンドウにあることがよくわかります。ビジネスに取り掛かろう

まず、書きましょう html部分。このコードはドキュメントの本文に配置されます。

モーダルウィンドウの呼び出し

モーダルウィンドウテキスト

選ぶ

モーダルウィンドウのテキスト。

CSSコード。別のcssファイルまたは
jQueryコードでは、モーダルとマスクの位置に焦点を当てます。この場合は、背景が徐々に暗くなります。

注意！ドキュメントの先頭にライブラリを含めることを忘れないでください！

Googleサイトからライブラリを接続します。さて、jQueryコード自体。

jQueryコード

モーダルウィンドウ-ウェブマスターの武器庫で頻繁に使用されるツール。それは非常によく適しています多数登録フォーム、広告ユニット、メッセージなどの表示などのタスク。

ただし、プロジェクトの情報サポートにおける重要な位置にもかかわらず、モーダルは通常JavaScriptで実装されているため、機能を拡張したり、下位互換性を確保したりするときに問題が発生する可能性があります。

HTML5とCSS3を使用すると、モーダルを非常に簡単に作成できます。

HTMLマークアップ

モーダルウィンドウを作成するための最初のステップは、シンプルで効果的なマークアップです。

モーダルウィンドウを開く

div要素の内部モーダルウィンドウのコンテンツが配置されます。また、ウィンドウを閉じるためのリンクを整理する必要があります。たとえば、簡単な見出しといくつかの段落を配置しましょう。この例の完全なマークアップは次のようになります。

モーダルウィンドウを開く

バツ

モーダルウィンドウ

CSS3を使用して作成できる単純なモーダルの例。

メッセージの表示から登録フォームまで、幅広くご利用いただけます。

スタイル

クラスを作成する modalDialog構築を開始します外観:

ModalDialog（位置：固定;フォントファミリ：Arial、Helvetica、sans-serif;上：0;右：0;下：0;左：0;背景：rgba（0,0,0,0.8）; z-index ：99999; -webkit-transition：不透明度400msイーズイン; -moz-transition：不透明度400msイーズイン;トランジション：不透明度400msイーズイン;表示：なし;ポインターイベント：なし;）

ウィンドウの位置は固定されています。つまり、次の場合にページをスクロールするとウィンドウが下に移動します。窓を開ける。また、黒い背景が画面いっぱいに拡大します。

背景はわずかに透明になり、プロパティを使用して他のすべての要素の上に配置されます z-index.

最後に、トランジションを設定して、モーダルウィンドウを表示し、非アクティブ状態で非表示にします。

多分あなたはプロパティを知らない ポインタイベント、ただし、要素がマウスクリックにどのように反応するかを制御できます。値をクラスの値に設定します modalDialog、疑似クラスがアクティブな場合、リンクはマウスクリックに応答しないため "：目標".

次に、疑似クラスを追加します ：目標モーダルウィンドウのスタイル。

ModalDialog：target（display：block; pointer-events：auto;）。modalDialog> div（width：400px; position：relative; margin：10％auto; padding：5px 20px 13px 20px; border-radius：10px; background：＃ fff;背景：-moz-linear-gradient（＃fff、＃999）;背景：-webkit-linear-gradient（＃fff、＃999）;背景：-o-linear-gradient（＃fff、＃999）; ）。

疑似クラス目標要素の表示モードを変更し、リンクをクリックするとモーダルウィンドウが表示されるようにします。プロパティの値も変更します ポインタイベント.

モーダルの幅とページ上の位置を定義します。また、背景と丸みを帯びた角のグラデーションも定義します。

窓を閉めて

次に、ウィンドウを閉じる機能を実装する必要があります。ボタンの外観を形成します。

Close（background：＃606061; color：#FFFFFF; line-height：25px; position：absolute; right：-12px; text-align：center; top：-10px; width：24px; text-decoration：none; font-重み：太字; -webkit-border-radius：12px; -moz-border-radius：12px; border-radius：12px; -moz-box-shadow：1px 1px 3px＃000; -webkit-box-shadow：1px 1px 3px＃000; box-shadow：1px 1px 3px＃000;）。close：hover（背景：＃00d9ff;）

ボタンには、テキストの背景と位置を設定します。次に、ボタンを配置し、丸みを帯びた境界線プロパティを使用してボタンを丸くし、明るい影を形成します。ボタンの上にマウスカーソルを置くと、背景色が変わります。

モーダルウィンドウは、重要なことを言うためにポップアップする小さなウィンドウです。 Bootstrapなしでモーダルウィンドウを作成するのは難しいですか？それを理解してみましょう。

DOMのどこに挿入しますか？

通常、終了ボディタグの前に配置します。

主にスタイルのため。ボディ全体をラップするレイヤーを処理する場合は、独自の配置を持つ可能性のある未知の親要素のセットを使用するよりも、CSSを使用してモーダルを配置する方がはるかに簡単です。

センタリング

これが私のお気に入りのトリックの1つで、高さや幅を知らなくても垂直方向と水平方向の両方を中央に配置できます。

モーダル（位置：固定;上：50％;左：50％;変換：変換（-50％、-50％）;）

オープンモーダルは通常、幅に関係なく右中央に配置する必要があるため、これは非常に便利です。中身によって高さが変わる可能性が高くなります。

位置固定？

位置を使用したことに注意してください：固定。開いているモーダルが常に中央にある間、ユーザーが下にスクロールできるようにします。一般的に、固定値は、モバイルデバイス。ただし、古い電話を考慮する必要がある場合は、absoluteに置き換えてみてください。

幅を理解する

大画面では、一般的なオープンモーダルは中央に配置されるだけでなく、幅も制限されます。

モーダル（幅：600px;）

ただし、幅が600px未満の画面もあります。この状況を修正するには、最大幅を追加します。

モーダル（幅：600px;最大幅：100％;）

高さ

高層ビルを設定することは、さらに責任のある作業です。コンテンツは変化する傾向があることを私たちは知っています。さらに、変換センタリング技術は、スクロールバーが表示されることなくエッジをうまく切り取ります。最大の高さを設定すると、2回目の安全が確保されます。

モーダル（高さ：400px;最大高さ：100％;）

オーバーフロー

高さを計算したら、オーバーフロープロパティを処理します。 .modalでオーバーフロー値を使用するのが一般的ですが、これには2つの問題があります。

スクロールしてはいけない要素を使用したい場合があります。
オーバーフローは、使用するシャドウをクリップします。

内部コンテナを使用することをお勧めします。

スクロールする必要のあるコンテンツがあることを考慮して、高さを設定する必要があります。いくつかのオプションがあります。そのうちの1つは次のとおりです。

モーダルガッツ（位置：絶対;上：0;左：0;幅：100％;高さ：100％; / *パディング* /パディング：20px 50px 20px 20px; / *スクロールを有効にする* /オーバーフロー：自動;）

ボタン

モーダルを使用するという考えは、何かが行われる前にアクションを強制的に実行することです。ウィンドウの閉じるボタンをどの状態でも表示できるようにするのは良い考えのようです。

シェーディングに対処しましょう

通常のモーダルウィンドウは、完全に調光可能な背景で作成されます。これはいくつかの理由で役立ちます。

画面の残りの部分を暗くする可能性があります
モーダル周辺のコンテンツとのクリック/インタラクションを防ぐことができます
巨大な閉じるボタンとして使用できます

典型的な使用例：

.modal（/ *上記のすべて* / z-index：1010;）。modal-overlay（z-index：1000; position：fixed; top：0; left：0; width：100％; height：100 ％;）

クラスごとに開くのではなく、クラスごとに閉じる

デフォルトが 。モーダルクラスはたとえばのように隠されています 表示：なし;次に、開くには、クラスを追加します .modal.open（display：block;）

ただし、これは悪い場合があります。これは、モーダルが display：flex;と 表示ブロック;書き直してください。

モーダル（.display：flex;）。modal.closed（display：none;）

JavaScriptを追加する

var modal = document.querySelector（ "＃modal"）、modalOverlay = document.querySelector（ "＃modal-overlay"）、closeButton = document.querySelector（ "＃close-button"）、openButton = document.querySelector（ "＃open -ボタン"）; closeButton.addEventListner（ "click"、function（）（modal.classList.toggle（ "closed"）; modalOverlay.classList.toggle（ "closed"）;））; openButton.addEventListner（ "click"、function（）（modal.classList.toggle（ "closed"）; modalOverlay.classList.toggle（ "closed"）;））;

モーダルウィンドウは次のように扱うことができます素晴らしい方法追加の画面スペースを購入し、サイトユーザーの注意を引き付け、選択肢を提供するか、変更について警告します。または、他の方法では注意を払わないであろう訪問者情報を押し付けることを可能にする汚いハックとして。

これらは、サイトのユーザーとの関係を測定する定規の極値です。習慣、個人的な好み、およびWebサーフィンの方法に応じて、モーダルはユーザーにとって祝福または呪いになる可能性があります。

モーダルウィンドウを使用すると、ユーザーはサイトのある部分から別の部分に注意をすばやく切り替えることができます。そのコンテンツは、ユーザーが今見ているものと一致しない場合があります。

モーダルの外観が自動的に行われた場合、または単にユーザーによって明示的に開始されなかった場合は、方向感覚を失い、煩わしいものになる可能性があります。これにより、モーダルがユーザーのプライバシーを煩わしく侵害していると非難される可能性があります。

モーダルウィンドウには、シンプルで見やすいコントロールが含まれている限り、ユーザーの邪魔をすることはできないようです。画面の隅にある[クロス]をクリックするか、テキストに目を通すか、最後にこの登録フォームに記入することができます。

ただし、キオスクキーボード、点字ディスプレイ、またはデバイスを使用してブラウザを制御していると想像してください。音声入力、および表示されたモーダルウィンドウは、入力フォーカスをボタンまたはフィールドに移動しませんでしたが、サイトコンテンツの残りの部分でそれ自体の下のどこかに残しました。これにより、サイトがデバイスで使用できなくなります。

そして、これらのケースはあなたが予想するよりも頻繁に起こります。現代の開発ユーザビリティの実践者とテストツール。