HTMLでモーダルウィンドウを呼び出す方法。 JSのないCSSの単純なモーダルウィンドウ

3.参照によって引き起こされるモーダルjQueryウィンドウの例（デモ付き）

ほとんどの場合、インターネット上でオンラインでポップアップを見ている モーダルウィンドウ - 登録確認、警告、参照情報、ファイルのダウンロードなど。 このレッスンでは、ほとんどの単純なモーダルウィンドウを作成するためのいくつかの例を提供します。

簡単なポップアップモーダルウィンドウを作成します

すぐに表示される最も簡単なモーダルウィンドウのコードを検討します
jQueryコード

コードを挿入する 体。 あなたのページ コマンドなしでページをダウンロードした直後に、次のウィンドウが表示されます。

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

CSSを参照してModal JQueryウィンドウを呼び出す

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

入力と登録フォームがそのようなウィンドウにあることがよくあることがよくあります。 私たちは仕事を始めます

起動するには、書きます hTMLパート。 このコードはあなたの文書の本文に置かれています。

モーダルウィンドウを呼び出します

CSSコード。 別のCSSファイルまたはIN
jQueryコードでは、主な注意が私たちの場合の緩やかな薄暗い背景の中で、モーダルウィンドウとマスクの位置に集中します。

注意！ 文書の頭の中のライブラリを接続することを忘れないでください。

Googleからライブラリを接続します。 まあ、直接jQueryコード自体。

jQueryコード

みなさん、こんにちは！ この小さなクラスでは、純粋なCSS上にシンプルで強力なモーダルウィンドウを作成します。 そして同時に、私たちはFlexBoxとしてそのような便利なことを繰り返します（そして私が開くところ）。 同時に、クリックすることによって開くモーダルウィンドウだけでなく、画面の中央に位置しているモーダルウィンドウを作成します。 一度一度だけで行うことができます javaScriptを使用してしかし、時間が経過し、それは文字通り4行のコードを使用して行うことができます。

オープンモーダルウィンドウ

このモーダルウィンドウはすべて2つのレイヤーで構成されています。 モーダルウィンドウ。、モーダルウィンドウの周囲のスペース全体を暗くし、画面の中央のウィンドウの内容を揃えます。 第2層 - クラス modal_body。 - モーダルウィンドウ自体の内容を直接含みます。

このマークアップのためのCSSコードを作成するようになりました。

モーダル（固定;表示：なし;トップ：0;右：0;左：0; z-Index：0;背景：RGBA（0,0,0,0,7）;ポインタ-events：none;）.modal：ターゲット（表示：flex; pointerイベント：auto;）.modal_body（位置：相対; z-index：2; display：block; margin：auto; padding：15px;背景：＃ FFF;）。modalfull（位置：絶対;表示：ブロック; z-index：0;幅：100％;）

モーダルウィンドウの作業を見て、それがどのように機能するかを識別しましょう。

見ているように、「モーダルウィンドウを開く」をクリックするとウィンドウがウィンドウのシェイト、白いモーダルウィンドウが正確に中央に表示されます。 私たちが止めて自分自身を理論を尽くすまでこれで。

JavaScriptを使用しないと同意したので、その助けを借りてできませんでした。要素を押すと、HASHのCSS-疑似クラスとアンカーリンクの助けを簡単に実行することができます（このページの項目を指定する）。 iD. リンク内のポインタと等しくなければならない値。 私たちの例を見てください： href。 リンクIをリンク iD. モーダルウィンドウのメインコンテナは同じ値です - モーダルウィンドウ。。 ブラウザがどのアイテムが互いに対話するかを理解しなければならないので、これは重要です。

私たちの場合、モーダルウィンドウの一般コンテナは隠されているため、モーダルウィンドウの内容はすべて隠されています。 しかし、リンクをクリックすると、要素は疑似クラスを取得します ： 目標。 それに応じて現れる。 CSSコード - プロパティを見てください 表示 Sを変更 無し 上に フレックス。 それの助けを借りて整列させることができるので、FlexはFlexに注意してください。 modal_body。 正確に中央の画面。 私たちがすぐに彼に登録された他のすべてのスタイル。

ちなみに、画面の表面全体にどのように平らになったのかわからない場合、私は言う - 次の4つの座の全体的なもの：

トップ：0; 右：0; 下：0; 左：0;

同時に左上、左側の右側のピクセルにあるべきであることを指摘しました。 代わりに、たとえばそのような保存を使用できます。

幅：100％。 高さ：100VH;

ここでは、画面の100％に等しい幅を指定しますが、高さはインストールするのが良いです。 ビューポートの高さ - ブラウザウィンドウの高さ。 私は自分の版を止めます。

もう1つの重要なニアンスはz-indexプロパティの値です モーダル そして modal_body。。 それらは必然的でなければならない、そして modal_body。 必ずしも少なくとも1つのユニットに値が必要です。そうしないと、モーダルウィンドウの内容は使用できません - リンクとボタンを押すことはできません。 そして、そこにスクロールコンテンツがある場合は、1つの要素が他の要素と重なるため、機能しません。

私たちはあなたの傑作を創造し続けます。 クリックすると、モーダルウィンドウが表示されますが、閉じることはできません。 閉じるためのボタンを追加しましょう。

実際には、彼女はキャンセルします ： 目標。 私たちのモーダルウィンドウの場合、それは単に目から隠れている最初の位置をとります。 しかし、この参考文献はいくつかの副題があります - それが押されるとブラウザはそのような要素を見つけようとしますが、fiascoに苦しんでおり、そしてページを最初に変えるでしょう。 この動作は、モーダルウィンドウの製造へのそのようなアプローチの小さなマイナスの1つですが、それに対処することができます。

この属性のために href。 私たちが変える参考文献 «#» 上に "#modalwindowclose"ウィンドウを開いたリンクボタンをクリックし、属性を追加します。 iD. 同じ意味。 属性を使用できます 名前。しかし、アンカーを決定するためのHTML5では、属性を示すためには優れております。 iD..

オープンモーダルウィンドウ

ブラウザを押すとボタンに戻ります。 真実のために、このアンカーが画面の上端にあると言ってもらいたいです。 しかし、開くためのこのボタンがヘッダーまたはフッターにある場合、この問題は平準化されています。 また、ヘッダに固定位置がある場合は、コールバックまたは予約注文/相談を注文することができますが、ウィンドウを閉じるとうまくいきます。

これが私たちがしたことの例です。

あなたはさらにコンテナを修正することができます modal_body。 - これらはサイズの制限事項（高さと幅を上げないように）です。 そしてもう1つの小さなニュアンス - 可能な限りモーダルウィンドウでコードをお勧めし、閉じるタグの前に座る.

これはすぐにモーダルウィンドウを作ることができる方法です。 私たちが書いたこのコードは、必要に応じて必要なスタイルを追加することによって基本版で使用できます。

私のレッスンがあなたに役立っていたことを願っています。 あなたにとって良い日とウェブアイランドでの新しい会議の前に！

スクリプトを使用せずに、サイトの単純なモーダルウィンドウをHTMLおよびCSSコードのみを使用して行うことができます。 結局のところ、多数のスクリプト、自然に、そのサイトに負担をかけてその作業を遅くします。
あるいは、この単純なモーダルウィンドウを見てください。 最小コードですが、かなり元気です。 もちろん、モジュールjQueryモーダルウィンドウの中には上がりませんが、それでも。

CSS スタイルシートに入れることが望ましいコード、通常はスタイル。

/ *スタイルスタイル* / .window（位置：固定;トップ：0;右：0;下：0;左：0;背景：RGBA（0,0,0,0,7）;; zインデックス： 99999; -webkit -transition：不透明度400msの簡単な; -moz - 遷移：不透明度400msの容易さ;遷移：不透明度400ms iteas-in; display：none; pointer-events：none;）。）.window：ターゲット（display：ブロック; Pointereイベント：auto;）。）.window\u003e div（幅：300px;位置：相対;マージン：10％自動; PDING：20px;境界線：5px; backgract：＃F2F2F2;ボックス - シャドウ：0px 20px 2px ;閉じる（背景：＃CC3300;色：#fffffff; line-height：25px;右：-12px; text-align：center; top：24px; text-decoration：なし; Font - Weight：Bold; -webkit-border-radius：12px; -moz-border-radius：12px;境界線 - 半径：12px; -moz-box-shadow：1px 1px 3px＃000; -webkit-box-shadow ：1px 1px 3px＃000;ボックス - シャドウ：1px 1px 3px＃000;）.close：ホバー（バックグラウンド：＃990000;）/ *スタイルの終わり* /

幅のサイズを目的のものに変更して、モーダルウィンドウの幅を調整します。 コードではこの場所が注目されています。

まあ、正しい場所に置かれているHTMLコード。 これは本質的にModaliの開口部への参照です。

リンクテキスト

例

WordPressで簡単なモーダルウィンドウをインストールします

WORDPRESSのモーダルウィンドウの使用は、上記とは実質的に異なるものではない。 たとえば、ショートコードを追加できることを追加できます。 フィードバック プラグインCF-7。

司法内に統合を掲載する必要がある場合は、テンプレートファイルに入ってください。 hTMLコード 目的の場所のテンプレートで。

純粋なCSSで完全に実行される機能モーダルウィンドウでは、サイト上のコールにさまざまな機能を入力できます。 おそらく、これは私がその前立腺の設定の観点から、そしてインストールに関して、モーダルウィンドウの選択から出会う多くのものの1つです。 しかし、主なことは他の人にあきらめない機能です。 また、デフォルトで行われます 薄暗い色合いボタンがどこに右上隅に取り付けられています。

これはトリップ機能に行き、単純にフレームワークが消え、この小さな要素でもカラーパレットの変更に影響を与える効果があります。 これで、Webマスターをサイトに置き、説明または演算子を配置することができます。これは、統計や情報機としての異なるカテゴリを出力できます。

しかし、その事実は、リソースの暗いスタイルを持っている場合は、スタイルで、範囲をすばやく変更することができます。または元のデザインの下にはかなり適しています。 ここにいます 標準的な方法 ModalウィンドウへのクリーンCSSを作成する方法は、HTMLバインディングのリンクの下にあるボタンをクリックしたときに起動します。 ボタン自体は、1つのクラスを削除するスタイルで、名前が名前になるように表示されます。これは、主な機能またはナビゲーションサイトの場所にあるナビゲーションまたはコントロールパネルの両方に配信できます。

これは、すべてがうまくいくことを確認するときです。

インストールするには

ボタンを使ったウィンドウ

CSS

butksaton-satkavate（
表示：インラインブロック;
テキスト装飾：なし。
マージン右：7px;
境界線：5ピクセル;
パディング：7px 9px;
背景：＃199a36;
カラー：＃FBF7F7！重要;
}

アレルメン（
表示：Flex;
位置：固定
左：0;
トップ：-100％
幅：100％。
高さ：100％。
整列品：中央;
Justify-Content：Center;
不透明度：0;
-webkit-transhion：トップ0S .7、不透明度.7s 0
遷移：トップ0S.7S、不透明度.7S 0
}

Anelumen：ターゲット（
トップ：0;
不透明度：1;
-webkit-遷移：なし
トランジション：なし
}

アレメンフィギュア（
幅：100％。
最大幅：530px;
位置：相対;
パディング：1.8em;
不透明度：0;
背景色：白。
-WebKit - 遷移：不透明度.7s;
移行：不透明度.7s;
}

anelumen.lowingnuska図（
背景：＃F9F5F5;
境界線：7px;
パディングトップ：8ピクセル。
国境：3pxソリッド#AAABAD;
}

anelumen.lowingnuska図H2（
マージン - トップ：0;
パディング底：3px;
ボーダーボトム：1ピクセル＃DCD7D7;
}

ALELUMEN：ターゲット図（
不透明度：1;
}

anelumen.lowingnuska .compatibg-habywhise（
テキスト装飾：なし。
位置：絶対;
右：8px;
トップ：0px;
フォントサイズ：41px;
}

Anelumen .nensismiseg（
左：0;
トップ：0;
幅：100％。
高さ：100％。
位置：固定
背景色：RGBA（10,10,10,0.87）。
コンテンツ： "";
カーソル：デフォルト
可視性：隠れている;
-WebKit-Transhion：すべて.7s。
遷移：すべて.7s;
}

アレメン：ターゲット.nondismiseg（
可視性：目に見える。
}

CSSとPseudoclassのスタイリスティシスティスティックスティックスティックスは、多くの興味深い潜在的なアプリケーションを使用してCSS関数に従って完全に使用されていないものの1つであることを知っておく必要があります。

いつ始まります URLアドレス ページはあなたの要素に識別子を満たすか、または異なるように表現することができます、これはユーザーがページ上の特定の項目にジャンプするときです。

Modal Windows - WebマスターのArsenalによく使われるツール。 解決するのは非常に成功しています 多数 登録フォーム、広告ブロック、メッセージなどの出力などのタスク。

しかし、プロジェクトの情報サポートの重要な場所にもかかわらず、モーダルウィンドウは通常JavaScriptで実装されています。これは、機能を拡張するときや逆の互換性を拡大するときに問題を作成できます。

HTML5とCSS3を使用すると、特別な簡単なモーダルウィンドウを作成できます。

HTMLマークアップ

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

オープンモーダルウィンドウ

DIV要素の内側 モーダルウィンドウの内容が配置されます。 ウィンドウを閉じるためのリンクを整理する必要があります。 たとえば、単純なタイトルといくつかの段落を置きます。 私たちの例のフルマークアップは次のようになります。

オープンモーダルウィンドウ

スタイル

クラスを作成します modalDialog。 そしてフォームに入り始めます 外観:

ModalDialog（Position：Fixed; Font-Family：Arial、Helvetica、Sans-Serif; TOP：0;右：0;下：0;背景：RGBA（0,0,0,8）; z -index：99999; -webkit-transhion：不透明度400msの容易さ; -moz - 遷移：不透明度400ms遷移：不透明度400ms ite-in; display：none; none;）

私たちのウィンドウには固定位置があります。つまり、オープンウィンドウでページをスクロールするとシフトダウンします。 また、私たちの黒い背景は画面全体で拡大されます。

背景は小さな透明性を持ち、そのプロパティを使用して他のすべての要素の上に配置されます。 zインデックス。.

最後に、モーダルウィンドウを出力するように遷移を設定し、それを非アクティブ状態で隠します。

たぶんあなたはその財産を知らないでしょう ポインタイベントしかし、それはあなたがマウスボタンの押下にアイテムがどのように応答するかを制御することを可能にします。 クラスの値の値を設定します modalDialog。疑似クラスがアクティブなときにリンクはマウスボタンを押すのに応答しないでください。 "： 目標".

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

modaldialog：target（display：block;ポインタイベント：auto;）.modaldialog\u003e div（幅：400px;位置：相対;マージン：10％自動;パディング：5px 20px;境界線：10px;背景：＃ FFF; - MOZ-Linear-Gradient（#FFF、＃999）。背景： - WebKit - リニアグラデーション（#FFF、＃999）。背景： - O - 線形勾配（#FFF、＃999）。 ）

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

モーダルウィンドウの幅とページ上の位置を定義します。 私達はまた背景と丸みを帯びた角の勾配を決定します。

窓を閉めて

これで、ウィンドウクローズ機能を実装する必要があります。 ボタンの外観を形成します。

（背景：＃606061;色：#ffffff; absite：絶対値：-12px; text-align：center; top：24px; text-dectoration：none; font-重量：太字; -webkit-border-radius：12px; -moz-border-radius：12px;境界線 - 半径：12px; -moz-box-shadow：1px 1px 3px＃000; -webkit-box-shadow：1px 1px 3px＃000; Box-Shadow：1px 1px 3px＃000;）.close：Hover（バックグラウンド：＃00d9ff;）

ボタンの場合は、テキストの背景と位置を設定します。 それから私たちはボタンを配置し、フレームのルーティングプロパティを使って丸い影を形成します。 マウスカーソルを回転させると、色の背景が変わります。