背景がぼやけたJqueryモーダルウィンドウ。 jQueryポップアップモーダルを作成します。 jQueryモーダル

さまざまなサイト構築手法について話すと、モーダルウィンドウを作成する方法のいくつかについて話さないのはばかげているでしょう。ポップアップ、モーダルウィンドウを使用する目的、有用性、および新たな問題については説明しません。このようなウィンドウを作成する多くの例の1つだけを分析してみましょう。
たとえば、やなどの特別なプラグインを使用できない場合があるため、独自のプラグインを作成する方法を理解する価値があります。

それを行う方法を見てみましょう：

HTML

次の属性を持つタグを追加することから始めましょう。

href-＃？w = 500はウィンドウの幅を示します
rel-各ウィンドウの一意の属性
class = "poplight"-ポップアップウィンドウを表示するためのクラス

< a href= "#?w=500" rel= "popup_name" class = "poplight" >動作中のウィンドウを参照してください-幅= 500px

動作中のウィンドウを参照してください-幅= 500px

次に、ポップアップのインラインマークアップを作成する必要があります。コンテンツの下部など、ページのどこにでも配置できます。ポップアップIDが属性と一致することに注意してください rel鬼ごっこ
これにより、リンクとポップアップがリンクされます。

見出し

あなたの心が望むどんなテキストでも

それで、ページ上のウィンドウの配置を理解しました。それでは、スタイルを使用してスタイルを設定し、いわばまともな外観を与えましょう。

CSSレイアウト

わかりやすくするために、ウィンドウのスタイルパラメータについていくつか説明しました。ポップアップはさまざまなサイズになる可能性があるため、CSSでは指定しません ポップアップブロックウィンドウの端、必要なサイズを計算するために、これはただのタスクです。

#fade（表示：なし; / *-デフォルトで非表示-* /背景：rgba（7、87、207、0.8）; 位置：固定; 左：0; 上：0; 幅：100％; 高さ：100％; 不透明度：.80; z-index：9999; ）.popup_block（表示：なし; / *-デフォルトで非表示-* /背景：#fff; パディング：20px; ボーダー：8pxソリッドrgb（134、134、134）; フロート：左; フォントサイズ：85％; 位置：固定; 上：50％; 左：50％; 色：＃000; 最大幅：750px; 最小幅：320px; 高さ：自動; z-index：99999; / * --CSS3ボックスシャドウ-* /-webkit-box-shadow：0px 0px 20px＃000; -moz-box-shadow：0px 0px 20px＃000; ボックスシャドウ：0px 0px 20px＃000; / * --CSS3コーナー丸め-* /-webkit-border-radius：12px; -moz-border-radius：12px; border-radius：12px; ）.popup_block p（font-weight：400; padding：0; margin：0; color：＃000; line-height：1.6;）。popup_block h2（margin：0px 0 10px; color：rgb（43、43、43 ）; font-weight：400; text-align：center; text-shadow：1px 1px 2px＃0D0C0C;） / *閉じるボタンを形成します* /.close（background-color：rgba（61、61、61、0.8）; border：2px solid #ccc; height：25px; line-height：20px; position：absolute; right：-17px; font-weight：bold; text-align：center; text-decoration：none; padding：0; top：-17px; width：25px; -webkit-border-radius：50％; -moz-border-radius：50％; -ms-border- radius：50％; -o-border-radius：50％; border-radius：50％; -moz-box-shadow：1px 1px 3px＃000; -webkit-box-shadow：1px 1px 3px＃000; box-シャドウ：1px 1px 3px＃000;）。close：before（color：rgba（255、255、255、0.9）; content： "X"; font-size：12px; text-shadow：0 -1px rgba（0、 0、0、0.9）;）。close：hover（background-color：rgba（252、20、0、0.8）;）。shadow（box-shadow：4px 4px 10px＃857373; -webkit-box-shadow：4px 4px 10px＃857373; -moz-box-shadow：4px 4px 10px＃857373;パディング：0;） / * --IE6の固定位置-* /* html #fade（位置：絶対;）* html .popup_block（位置：絶対;）

#fade（表示：なし; / *-デフォルトで非表示-* /背景：rgba（7、87、207、0.8）;位置：固定;左：0;上：0;幅：100％;高さ：100％ ;不透明度：.80; z-index：9999;）。popup_block（表示：なし; / *-デフォルトで非表示-* /背景：#fff;パディング：20px;境界線：8pxソリッドrgb（134、134、134） ; float：left; font-size：85％; position：fixed; top：50％; left：50％; color：＃000; max-width：750px; min-width：320px; height：auto; z-index ：99999; / * --CSS3ボックスシャドウ-* / -webkit-box-shadow：0px 0px 20px＃000; -moz-box-shadow：0px 0px 20px＃000; box-shadow：0px 0px 20px＃000; / * --CSS3の角の丸め-* / -webkit-border-radius：12px; -moz-border-radius：12px; border-radius：12px;）。popup_block p（font-weight：400; padding：0; margin：0 ; color：＃000; line-height：1.6;）。popup_block h2（margin：0px 0 10px; color：rgb（43、43、43）; font-weight：400; text-align：center; text-shadow： 1px 1px 2px＃0D0C0C;）/ *閉じるボタンを形成する* / .close（backgro und-color：rgba（61、61、61、0.8）; ボーダー：2px実線#ccc; 高さ：25px; 行の高さ：20px; 位置：絶対; 右：-17px; フォントの太さ：太字; text-align：center; テキスト装飾：なし;パディング：0; 上：-17px; 幅：25px; -webkit-border-radius：50％; -moz-border-radius：50％; -ms-border-radius：50％; -o-border-radius：50％; 境界半径：50％; -moz-box-shadow：1px 1px 3px＃000; -webkit-box-shadow：1px 1px 3px＃000; ボックスシャドウ：1px 1px 3px＃000; ）.close：before（color：rgba（255、255、255、0.9）; content： "X"; font-size：12px; text-shadow：0 -1px rgba（0、0、0、0.9）;） .close：hover（background-color：rgba（252、20、0、0.8）;）。shadow（box-shadow：4px 4px 10px＃857373; -webkit-box-shadow：4px 4px 10px＃857373; -moz-ボックスシャドウ：4px 4px 10px＃857373;パディング：0;）/ * --IE6の固定位置-* / * html #fade（位置：絶対;）* html .popup_block（位置：絶対;）

cssを使用したウィンドウの形成と外観により、特に問題はないと思います。スタイルは、HTMLページのタグ間で直接書き込むことができますと、またはスタイルを別のファイルに入れることができます。通常、これはファイルです。 style.css、またはそのようなもの。

JQueryのセットアップ

モーダルウィンドウの本格的な作業には、jQueryを接続する必要があります。このライブラリの作業に慣れていない人でも読むことができます。

さて、次に進みます。終了タグの前のセクションで、ライブラリのWebサイトから最新バージョンのjQueryを使用するか、ドキュメントにリンクしてGoogleでホストされている別のファイルを使用できます。このような行を配置することによって：

次のステップでは、jqueryプラグインのスタッフィングと関数を確認し、ポップアップウィンドウをアクティブにします。コードには、実行していることをよりよく理解するための説明が含まれています。

JQueryプラグイン

$（ドキュメント）。準備完了（関数（）（ // poplightクラスとタグ属性のhrefを持つリンクをクリックしたときと＃$（ "a.poplight"）。クリック（関数（）（var popID = $（this）。attr（ "rel"）; //ウィンドウの名前を取得します。新しいウィンドウを追加するときは、リンクのrel属性の名前を変更することを忘れないでください。 var popURL = $（これ）。 attr（ "href"）; //リンクのhref属性からサイズを取得します // hrefurlからのリクエストと変数 var query = popURL。スプリット（"？"）; var dim = query [1]。スプリット（"＆"）; var popWidth = dim [0]。分割（ "="）[1]; //クエリ文字列の最初の値 //ウィンドウに閉じるボタンを追加します$（ "＃" + popID）。フェードイン（）。 css（（ "width"：数値（popWidth）））。付加（ "" ) ; //中央揃え（垂直および水平）のマージン（マージン）を決定します-パディング+ cssで定義された境界線の幅を考慮して、高さ/幅に80を追加します var popMargTop =（$（ "＃" + popID）。height（）+ 80）/ 2; var popMargLeft =（$（ "＃" + popID）。width（）+ 80）/ 2; //パディングの量を設定します$（ "＃" + popID）。 css（（ "margin-top"：-popMargTop、 "margin-left"：-popMargLeft））; //半透明のシェーディング背景を追加します$（「本体」）。追加（ "

" ) ; // divコンテナはタグの前に書き込まれます. $（ "＃フェード"）。 css（（ "filter"： "alpha（opacity = 80）"））。フェードイン（）; //レイヤーの半透明性、鈍いIEのフィルター falseを返します。））; //ウィンドウと背景の陰影を閉じます$（ドキュメント）。 on（ "click"、 "a.close、＃fade"、function（）（ //ウィンドウの外側をクリックして閉じます。バックグラウンドで..。$（ "＃fade、.popup_block"）。 fadeOut（function（）（$（ "＃fade、a.close"）。remove（）; // フェードアウト））; falseを返します。））; ））;

$（document）.ready（function（）（// poplightクラスとタグ属性のhrefを持つリンクをクリックしたとき c＃$（ "a.poplight"）。click（function（）（var popID = $（this）.attr（ "rel"）; //ウィンドウの名前を取得します。変更することを忘れないでください。新しいものを追加するときのリンクのrel属性の名前varpopURL = $（this）.attr（ "href"）; //リンククエリのhref属性からサイズを取得します// href urlvarクエリから変数を取得します= popURL.split（ "？"）; var dim = query.split（ "＆"）; var popWidth = dim.split（ "="）; //クエリ文字列の最初の値//閉じるボタンをwindow $（ "＃" + popID）.fadeIn（）。css（（ "width"：Number（popWidth）））。Prepend（ ""）; //中央揃え（垂直方向および水平方向）のマージン（マージン）を決定します-cssで定義されたパディング+境界線の幅で高さ/幅に80を追加しますvarpopMargTop =（$（ "＃" + popID）.height（）+ 80）/ 2; var popMargLeft =（$（ "＃" + popID ）.width（）+ 80）/ 2; //インデント値を設定$（ "＃" + popID）.css（（ "margin-top"：-popMargTop、 "margin-left"：-popMargLeft））; / /半透明のシェーディング背景を追加します$（ "body"）。append（ "

"）; // divコンテナはタグの前に書き込まれます..。 $（ "＃fade"）。css（（ "filter"： "alpha（opacity = 80）"））。fadeIn（）; //レイヤーの半透明性、鈍いIEのフィルターはfalseを返します。））; //ウィンドウを閉じて背景をフェードします$（document）.on（ "click"、 "a.close、＃fade"、function（）（//ウィンドウの外側、つまり背景をクリックして閉じます... $（ "＃fade、.popup_block"）。fadeOut（function（）（$（ "＃fade、a.close"）。remove（）; //フェードアウト））; return false;））; ））;

結論：

一般に、ジャングルに入らず、不要なコードのジブリッシュをロードしない場合、私たちの素晴らしいモーダルウィンドウはすぐに機能し、テキストに変換された考えやその他の有用な情報を待っています。
モーダルウィンドウを使用してビデオや大規模な画像を配置したい場合でも、上記のモーダルウィンドウの例は、それほど重い情報ではなく軽い情報を対象としているため、次のような特別なプラグインを使用することをお勧めします。必要に応じて、これは問題ではありません。

次回は間違いなく例を挙げて説明します。確かに、多くの人がポップアップウィンドウで他のサードパーティオブジェクトについて学ぶことに興味を持っています。だから、ウェブで迷子にならないで、お楽しみに！

アップデート：バージョンdm-modal.js v1.3（15.01.2017）
修理済み：href * = \\＃構文を使用して、非推奨の.live（）関数を置き換えました。プラグインは、jQueryライブラリの最新バージョンで動作するようになりました

それで全部です！別の便利なチュートリアルを入手できれば幸いです。

敬意を表して、アンドリュー

1.jQuery「SimpleModalBox」のモーダルウィンドウ

2.jQueryプラグイン「LeanModal」

モーダルでコンテンツを表示する。デモページでプラグインの動作を確認するには、[サインアップフォーム]または[基本コンテンツ]のリンクをクリックしてください。

3.jQueryプラグイン「ToastMessage」

ポップアップメッセージ。プラグインには2つの種類があります。あるケースでは、メッセージが自然に消えます。特定の時間が経過すると、2番目の実装では、メッセージを閉じるために、ボタンをクリックする必要があります。

4.モーダルウィンドウにポップアップするコンテンツ

プラグイン「Reveal」。プラグインの動作を確認するには、デモページの[Fire A RevealModal]ボタンをクリックしてください。

5.かわいいダイアログボックス

デモページの十字をクリックして、プラグインの動作を確認してください。

6. Mootoolsモーダルウィンドウ、プラグイン「MooDialog」

画面上部の7.jQueryポップアップバー

8.jQueryポップアップ

ポップアップウィンドウにフィードバックフォームを表示するためのjQueryプラグイン。

10.Facebookダイアログボックスを実装するためのMooTools「LightFace」プラグイン

Facebookスタイルのダイアログボックス。静的情報、画像、フレームに加えて、Ajaxリクエストをウィンドウに配置できます。多くのプラグイン設定、非常に強力なツール。それは非常にスタイリッシュで機能的に見えます。デモページのリンクをたどって、さまざまなコンテンツの例を確認してください。

11.jQueryモーダル

きちんとしたjQueryポップアップダイアログ。

12.jQueryモーダル

かわいいポップアップモーダルウィンドウ。 3つのスタイル。デモページには、ウィンドウを呼び出すための3つのリンクがあります。

13.jQueryモーダル

いくつかのタイプのポップアップモーダルウィンドウ。プラグインの動作を確認するには、デモページのリンクをクリックしてください。

15.ページ上のポップアップメッセージ

メッセージはページ上に表示され、ページは淡色表示されます。ポップアップメッセージを表示するには、デモページの[クリックしてください]をクリックします。十字をクリックすると閉じます。 jQueryで実装されています。

16.javascriptのモーダルウィンドウ「ModalBox」

ポップアップやページの再読み込みを使用せずに、最新のモーダルダイアログボックスを実装します。デモページで、[デモの開始]ボタンをクリックして、スクリプトがどのように機能するかを確認します。

17.プロトタイプライブラリを使用した「Leightbox」プラグイン

モーダルウィンドウにコンテンツを表示するためのプラグイン。

多くの場合、サイトでモーダルを見つけることができ、それらはすべてさまざまな目的で使用されます。確かに、それはあなたがサイトインターフェースをよりインタラクティブでユーザーフレンドリーにすることを可能にする非常に強力なツールです。たとえば、モーダルウィンドウは、承認フォーム、フィードバックフォーム、製品の注文など、さまざまなフォームに使用できますが、わかりません。

この投稿では、jQueryとCSSを使用してモーダルシンプルウィンドウを作成する方法の例を見ていきます。この例の特徴は、jQueryライブラリ自体を除いて、ここでは必要ないということです。

ページにモーダルコードを配置します。

選ぶ

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

マークアップからわかるように、モーダルウィンドウ自体のブロックはid =属性を持つdivです modal_form id =のスパン要素が含まれています modal_close..。この要素は、モーダルウィンドウを閉じるためのボタンとして機能します。さらに、ブロックの下には、id =属性を持つdivがあります。 かぶせる、これは同時に背景を暗くするのに役立ちます。モーダルウィンドウは、クラスとともに参照により開きます モーダル.

モーダルウィンドウのCSS

#modal_form（width：300px; height：300px; border-radius：5px; border：3px＃000 solid; background：#fff; position：fixed; top：45％; left：50％; margin-top：-150px; margin-left：-150px; display：none; opacity：0; z-index：5; padding：20px 10px;）＃modal_form #modal_close（width：21px; height：21px; position：absolute; top：10px; right： 10px;カーソル：ポインタ;表示：ブロック;）＃overlay（z-index：3; position：fixed; background-color：＃000; opacity：0.8; -moz-opacity：0.8; filter：alpha（opacity = 80） ;幅：100％;高さ：100％;上：0;左：0;カーソル：ポインター;表示：なし;）

にとって modal_form固定の幅と高さを設定してから、位置を画面の中央に配置します。モーダルアンダーレイの場合（ かぶせる）サイズを画面の幅に設定し、透明度で塗りつぶし、デフォルトで非表示にします。特別な瞬間 z-index、モーダルはページ上のすべての要素の中で最大である必要があり、表紙はモーダル自体を除くすべての要素の中で最大である必要があります。

最も基本的なことですが、これはjavascriptコードです。モーダルウィンドウの場合、2つの主要なイベントが使用されます。これはその開始です-クラスの要素をクリックします モーダル、この場合、これはリンクであり、モーダルウィンドウを閉じるにはカバーをクリックします（ かぶせる）、または閉じるボタンをクリックします。この場合は、id =のスパン要素です。 modal_close.

$（document）.ready（function（）（$（ "。modal"）。click（function（event）（event.preventDefault（）; $（ "＃overlay"）。fadeIn（400、//カバーを表示するアニメーションfunction（）（//次にモーダルウィンドウを表示$（ "＃modal_form"）。css（ "display"、 "block"）。animate（（opacity：1、top： "50％"）、200）;））;））; //モーダルウィンドウを閉じる$（ "＃modal_close、＃overlay"）。click（function（）（$（ "＃modal_form"）。animate（（opacity：0、top： "45％"）、200、//不透明度を下げるfunction（）（//アニメーションの後$（this）.css（ "display"、 "none"）; //ウィンドウを非表示にする$（ "＃overlay"）。fadeOut（400）; / /トレイを非表示にします））;））;））;

アニメーションを使用して、垂直位置を変更します上、および透明性 不透明度、これで面白い効果が得られます。ウィンドウを開いたときと閉じたときの両方で、同様の効果が使用されます。違いは、ブロックにプロパティを適用する順序が変更され、それによってウィンドウの開閉が視覚化されることです。

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

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

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

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

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

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

CSSを参照してjQueryモーダルウィンドウを呼び出す

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

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

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

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

モーダルテキスト

選ぶ

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

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

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

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

JQueryコード

モーダルは最新のWebデザインの不可欠な部分であり、モーダルの助けを借りて、開発者は1つのページをループし、訪問者を2番目のページに移動させない方法に頼ることができます。このチュートリアルでは、jQueryとCSS3を使用して、Webサイト用の素晴らしいぼやけた背景モーダルを作成する方法を見ていきます。これらのルールのおかげで、ウィンドウが表示されたときに背景がぼやけて、訪問者の視線がサイト上の必要な情報にのみバインドされます。

CSS3のぼやけた背景モーダル

最高の経済ニュースはここだけです：Drobakha

ウィンドウのアニメーションは、外観ボタンをクリックするとウィンドウが上から下にアニメーション化され、背景のぼかしが自動的に強調されるように設定されます。

ステップ1.HTML

タイトル、説明を含むコンテナがあり、次にクラスを持つボタンのクラスを追加します トグルモーダルモーダルウィンドウを開くには：

見出し

説明

次に、クラスを追加する必要があります モーダルはアクティブです、このクラスはモーダルウィンドウの呼び出しを担当します。 modal__headerウィンドウのタイトルとそのスタイリングを担当します。

ステップ2.CSS

それではスタイリングに移りましょう。最初のステップはクラスです ボタン、ご想像のとおり、サイトのボタンについては、正しい表示パラメータを設定します。

ボタン（background：none; background-clip：padding-box; display：inline-block; border：0; user-select：none; -webkit-touch-callout：none; -webkit-appearance：button; -webkit-user -select：なし; -moz-user-select：なし; -ms-user-select：なし;）

コンテナ（位置：相対;マージン：0自動;最大幅：960px;ボックスサイズ：ボーダーボックス;パディングトップ：40px;）

記事（背景：#fff;パディング：20px;マージン-ボトム：40px;ボーダー-半径：5px;）。modal（表示：なし;位置：固定;トップ：50％;幅：100％;高さ：自動;マージン-top：-150px; background-color：$ color-white; border-radius：3px; z-index：999; box-shadow：0px 1px 3px 0px darken（$ color-bg、10％）; @ media＃（ $ small）（左：50％;マージン-左：-260px;最大-幅：520px;）＆。is-active（表示：ブロック;アニメーション：1秒の線形スライド;）。inner（位置：相対;パディング：20px ;））。modal__header（border-bottom：1px solid darken（$ color-bg、5％）;）。modal__footer（text-align：center; button（display：inline-block;））

スタイルは非常にシンプルで、別のファイルに保存されているため、CSSに遭遇したことのある開発者がスタイルを編集するときに問題が発生することはありません。

ステップ3.JS

最後になりますが、それほど重要ではありませんが、メニューが表示されたときの背景の自動ぼかしの設定と、リンクのクリック可能性です。この小さなルールが役立ちます。 Js:

$（ "body"）。addClass（ "is-blurred"）; $（ "。toggleModal"）。on（ "click"、function（event）（event.preventDefault（）; $（ "。modal"）。toggleClass（ "is-active"）; $（ "body"）。toggleClass （ "ぼやけている"）;））;

その結果、訪問者の目に心地よく、デザインを乱雑にしない素晴らしいモーダルウィンドウが得られます。