クラスを追加する必要があるPotim モーダルはアクティブです、このクラスはモーダルウィンドウの週に認識されます。 modal_headerそのヨガstylіzatsіyuviknaのタイトルのためのVіdpovіdaє。

Krok 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％）; $ 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を作成するときはいつでも、小売店で編集するときに折りたたまれることはありません。

Croc 3. JS

維持しましょう。ただし、メニューが表示されたときに自動的に背景を変更するインストールと、システムのクリック可能性が重要です。これは、小さなルールに役立ちます。 JS:

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

その結果、明るい外観のレセプションのような素晴らしいモーダルウィンドウがあり、デザインが乱雑になることはありません。

3. jQueryモーダル静脈の例、クリックツークリック（デモ）

すべてのためのShvidshe、あなたはモーダルウィンドウをマージするインターネットで何度もスクランブルをかけました-登録の確認、事前、 Dovidkova情報、zavantazhennyaファイルと豊富なіnshoy。 このレッスンでは、最も単純なモーダルバイコンの作成の尻の小枝を伝播します。

単純なマージモーダルウィンドウを作成します

最も単純なモーダルウィンドウのコードを見てみましょう
jqueryコード

任意の場所にコードを貼り付けます 体あなたの側。 コマンドなしで、側の利益を背景に、あなたはこれを見るでしょう：

そして、次のコードの軸は、ブラウザがすべての側面を引き継いだ後に更新されます。 私たちの場合、画像の側面が絡まっていると、最後に飛び出すのは簡単です。

CSSを支援するためのjQueryモーダルWikkn

かぎ針編みに行きましょう モーダルウィンドウ力に押し付けられたとき。 必要に応じて背景を暗くします。

ログインフォームと登録自体がそのようなウィンドウにあることがよくわかります。 要点をつかもう

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

モーダルウィンドウのWiklik

CSSコード。 またはクリーンなcssファイル、または
jQueryコードでは、主な焦点はモーダルウィンドウの位置と背景の段階的な調光の質量にあります。

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

ライブラリをGoogleサイトに接続します。 まあ、それはjQueryコード自体です。

jQueryコード

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

2.jQueryプラグイン「LeanModal」

モーダルウィンドウで一緒に振動します。 デモページでプラグインを確認するには、「サインアップフォーム」または「基本コンテンツ」というメッセージをクリックします。

3.jQueryプラグイン「ToastMessage」

スプライシングリマインダー。 プラグインには2つのオプションがあります。 あるモードでは、通知は独立して表示されます。歌の時間の後、別の実装では、通知を閉じるには、ボタンをクリックする必要があります。

4. Vmіst、モーダルウィンドウでのschoスプライシング

プラグイン「Reveal」。 diyのプラグインを確認するには、デモ側の「FireARevealModal」ボタンを押します。

5.素敵なダイアログウィンドウ

デモページの十字をクリックして、ページのプラグインを確認します。

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

7.パネルをトップ画面にマージするjQuery

8.jQuery分割ウィンドウ

フォームを表示するためのjQueryプラグイン zvorotny zv'azku唾を吐くvіknіで。

10.Facebookダイアログウィンドウを実装するためのMooToolsプラグイン「LightFace」

Facebookスタイルのダイアログウィンドウ。 静的な情報については、画像、フレーム、Ajaxリクエストを画面に配置できます。 Bagato nalashtuvanロボットプラグイン、さらにタイトなツール。 よりスタイリッシュで機能的に見えます。 デモンストレーション側でメッセージを渡して、変化のあるお尻を見てください。

11.jQueryモーダルウィンドウ

ダイアログウィンドウをjQueryとうまくマージします。

12.jQueryモーダルウィンドウ

マージする素敵なファッショナブルなベール。 三 スタイリッシュなデザイン。 デモ側では、毎週のバイコンに3つのメッセージがあります。

13.jQueryモーダルウィンドウ

Vyplyvayutmodalnyvіknіkіlkohvіdіv。 diyのプラグインを確認するには、デモ側のメッセージを押してください。

15.通知側にスプライスします

メッセージは、側面が暗くなっているかのように、側面の上部に表示されます。 デモ側の「Clickme」テキストをクリックして、唾を吐くリマインダーを取得します。 ヨガの十字架を押して閉じます。 jQueryの助けを借りて実装されました。

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

ウィンドウのマージやサイドの再配置をひねることなく、現在のモーダルダイアログウィンドウを実装します。 デモ側の「デモ開始」ボタンを押して、スクリプトがどのように機能するかを確認します。

17.プロトタイプライブラリリンクを備えた「Leightbox」プラグイン

プラグインは、モーダルウィンドウでコンテンツをレンダリングします。

モーダルウィンドウを見ることができるサイトに頻繁に寄り添うと、すべての悪臭が勝利します rіznihzavdan。 サイトのインターフェースをよりインタラクティブで便利なものにすることができる、大変な仕事をすることは本当に価値があります。 たとえば、モーダルvіknaは、承認の形式、zvorotnogo zv'yazkuの形式、製品のデザインなど、さまざまな形式のvikoristanіにすることができますが、それだけでは不十分です。

この投稿では、jQueryとCSSを活用するためのモーダルでシンプルな方法を作成する方法について説明します。 特徴 このお尻ここでは、JQueryライブラリ自体には必要ありません。

モーダルウィンドウコードを横に配置します。

Vіdkritiモーダルvіkno

レイアウトからわかるように、id=属性を持つモーダルdivブロック modal_form cid=を削除するスパン要素 modal_close。 この要素は、モーダルウィンドウを閉じるためのボタンになります。さらに、展開のブロックの下に、id=属性を持つdivブロックがあります。 かぶせる一晩提供し、背景を暗くします。 強さのためのモーダルvyknovіdkrivatemeetsya、sクラス モーダル.

モーダルウィンドウの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; 10px; cursor：pointer; display：block; ）#overlay（z-index：3; position：fixed; background-color：＃000; opacity：0.8 ;; width：100％; height：100％; top：0; left：0; cursor：pointer; display：無し;

にとって modal_form幅と高さを固定し、画面中央の中央に配置しました。 モーダルウィンドウを配置するため（ かぶせる）画面の幅、透明度のある塗りつぶし、およびロック方法を設定します。 特別な瞬間 z-indexモーダルウィンドウでは、障害は側面のすべての要素の中で最大のものが原因であり、ライニングはすべての要素よりも多く、モーダルウィンドウ自体のクリームが原因です。

ここで主に、JavaScriptのコードです。 モーダルウィンドウの場合、2つの主要なサブタイプ、出力全体があります-クラスを持つ要素をクリックします モーダル、私たちの観点では、私たちは強さを持っており、モーダルウィンドウを閉じると、obkladinci（ かぶせる）または閉じるボタンをクリックします。ドロップダウンで要素spanзid= modal_close.

$（document）.ready（function（）（$（ "。modal"）。click（function（event）（event.preventDefault（）; $（ "＃overlay"）。fadeIn（400、//）アニメーションオーバーレイ関数（）（//mod。formを表示$（ "＃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）;））;） ）;;））;

ヘルプが必要な場合は、miをアニメートして垂直方向の位置を変更してください 上、および透明性 不透明度、そしてその助けのために私たちはシカビ効果を取ります。 同様の効果は、ウィンドウを開いたときと同じように勝利するため、閉じられます。 ブロックのストーキングパワーの順序を変更する人は、彼自身が世紀の終わりを視覚化します。

Roznіdayuchiは、サイト構築のさまざまな手法について、モーダルバイコンを作成する方法については言わないのは愚かなことです。 認識、好奇心、マージの問題、モーダルバイコンについては説明しません。 そのようなバイコンの作成の多くの例の1つだけを考えてみましょう。
たとえば、勝利する特別なプラグインの可能性がない場合のBuvayutの状況。これにより、独自のパワーを作成する方法を理解できます。

どのようにtserobitiに驚嘆しましょう：

HTML

不快な属性を持つタグを追加しましょう：

• href-＃？w=500ウィンドウ幅を指定
• rel-スキンベニヤの一意の属性
• class = "poplight" –ポップアップウィンドウを表示するためのクラス

< a href= "#?w=500" rel= "popup_name" class = "poplight" >DivVіknovії-幅=500px

DivVіknovії-幅=500px

次に、スプ​​ライシングウィンドウ用のロゼットを作成する必要があります。 側面のどこか、たとえばシールドの下部などで再配置が可能です。 マージする静脈識別子が属性と一致することを尊重します rel鬼ごっこ
Tseipov'yazuvatimeposilannyaそのsplivayuchevіknoを一度に。

それで、横のウィンドウの配置から、それを整理しました。それでは、追加のスタイルに合わせてアレンジしましょう。そうしましょう。

CSSレイアウト

わかりやすくするために、ウィンドウのスタイルでパラメーターの説明を書きました。 破片のヴィクナは母親になることができます 別のrozmіr、CSSで指定されていません popup_blockウィンドウの端で、必要なrozmіr、tseyakrazzavdannyaを計算します。

#fade（表示：なし; /*-ロック用添付 - */背景：rgba（7、87、207、0.8）; 位置：固定; 左：0; 上：0; 幅：100％ 高さ：100％; 不透明度：.80; z-index：9999; ）.popup_block（display：none; /*-ロックに取り付けられています--*/背景：#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;）; フォントの太さ：400; text-align：center; テキストシャドウ：1px 1px 2px /*閉じるボタンを形成します*/.close（background-color：rgba（61、61、61、0.8）; border：2px solid #ccc; height：25px; line-height：20px; position：absolute; -right：-17p; text-align：center 、text-decoration：none、padding：0; top：-17px; width：25px; -webkit-border-radius：50％; radius：50％-o-border-radius：50％; border-radius：50％ -moz-box-shadow：1px 1px 3px＃000; shadow：1px 1px 3px＃000; .0、0、0.9）; ）.close：ホバー（背景-色：rgba（252、20、0、0.8）;）。 4px 10px＃857373; -moz-box-shadow：4px 4px 10px＃857373; /*--IE6-の固定位置-*/* html #fade（位置：絶対;）* html .popup_block（位置：絶対;）

#fade（表示：なし; / * ---- * /背景：rgba（7、87、207、0.8）;位置：固定;左：0;上：0;幅：100％;高さ：100％、不透明度：.80、z-index：9999; 134、134）; float：左; フォントサイズ：85％ 位置：固定; トップ：50％; 左：50％ 色：＃000; z-index：99999; / *--CSS3 box-shadow-* / -webkit-box-shadow：0px 0px 20px＃000; -moz-box-shadow：0px 0px 20px＃000; 20px＃000;/*--CSS3の丸みを帯びたエッジ--*/-webkit-border-radius：12px; -moz-border-radius：12px; border-radius：12px; パディング：0; マージン：0; 色：＃000; line-height：1.6;）.popup_block h2（margin：0px 0 10px;：center; text-shadow：1px 1px 2px＃0D0C0C;）/*閉じるボタンを形成する*/ .close（backgro und-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：なし;パディング：0;トップ：-17px;幅：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-shadow：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 ：ホバー（背景色：rgba（252、20、0、0.8）;）.shadow（box-shadow：4px 4px 10px＃857373; -webkit-box-shadow：4px 4px 10px＃857 box-shadow：4px 4px 10px＃857373; padding：0;）/*--IE6の固定位置-*/ * html #fade（位置：絶対 ; ）。

Zモルドバニヤムヴィクナタヨガ 正気に見える h cssを助けます、特に折り目はないと思います。 スタイルは直接書くことができます サードパーティのHTML、タグ間 і、またはスタイルをokremyファイルに入れることができ、ファイルを呼び出します style.css、そうでなければ、それはあなたが生まれた場所です。

jQueryのカスタマイズ

モーダルウィンドウを完全に操作するには、ライブラリの動作を知らない人が読み取ることができるjQueryを含める必要があります。

そして、私たちはピデモを与えられました。 あなたはそれを自分で行うことができます 残りのバージョンライブラリサイトからのjQuery。それ以外の場合は、ドキュメントに追加することで、Googleokremiumオーバーレイの配置をねじることができます。、そのような行を配置する：

攻撃的なワニでは、中身と機能を見ることができます jqueryプラグインマージウィンドウをアクティブ化するには、何ができるかを簡単に理解するために、説明のためにコードをクリアする必要があります。

jQueryプラグイン

$（ドキュメント）。 ready（function（）（ //poplightクラスとタグのhref属性を使用してメッセージをヒットした場合 h＃$（ "a.poplight"）。 click（function（）（var popID = $（this）。attr（ "rel"））; //名前を削除することは重要です。新しい名前を追加するときは、rel属性の名前を変更することを忘れないでください。 var popURL = $（this）。 attr（ "href"）; //hrefからforce属性に展開する必要があります //hrefurlからの変更をリクエストします varquery=popURL。 スプリット（"？"）; vardim =query[1]。 スプリット（"＆"）; var popWidth =dim[0]。 split（ "="）[1]; //行の値の前 //ウィンドウに閉じるボタンを追加します$（ "＃" + popID）。 フェードイン（）。 css（（ "width"：Number（popWidth）））。 prepend（ "" ) ; //中央（垂直方向と水平方向）の位置合わせのマージン（マージン）を決定します-開口部とフレームの幅を調整して、高さ/幅に80を追加します（cssで定義） var popMargTop =（$（ "＃" + 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）"））。 フェードイン（）; //ボールのスペル、愚かなIEのフィルター falseを返します。 ））; //ウィンドウを閉じて背景を暗くします$（ドキュメント）。 on（ "click"、 "a.close、#fade"、function（）（ //クリックして姿勢を閉じます、tobto。 地上で..。$（ "＃fade、.popup_block"）。 およびfadeOut（function（）（$（ "＃fade、a.close"）。remove（）; //スムーズにフェードします））; falseを返します。 ））; ））;

$（document）.ready（function（）（//poplightクラスとタグのhref属性でメッセージをヒットしたとき ＃$（ "a.poplight"）。click（function（）（var popID = $（this）.attr（ "rel"）;//名前を削除します。relに新しい名前を追加するときに名前を変更することを忘れないでください。属性が送信されました）var popURL = $（this）.attr（ "href"）;//属性を送信するにはhrefからの展開が必要です//hrefurlからの変更をリクエストしますvarquery = popURL.split（ "？"）; var dim = query.split（ "＆"）; var popWidth = dim.split（ "="）; //行の最初の値を入力//閉じるボタンを追加$（ "＃" + popID）。Number（popWidth）） 。 （$（ "＃" + popID）.height（）+ 80）/ 2; var popMargLeft =（$（ "＃" + popID）.width（）+ 80）/ 2; "+ popID）.css（（" margin-top "：-popMargTop、" margin-left "：-popMargLeft））;

"）;//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;））; ））;

Visnovok：

ザガロム、だからネットに横になって、コードのジブリッシュで自分のふりをしないでください。私たちの奇跡のモーダルはついに機能する準備が整い、テキストに翻訳されたあなたの考えをチェックします。 対応する情報.
新しいビデオや大規模な画像に配置するために、モーダルな方法で紹介されることを望んでいるティムは、モーダルビューの尻よりもガイダンスの断片が優れているなどの特別なプラグインでスピードアップできることを嬉しく思います。問題はありますが、仕事のための簡単でそれほど重要ではない価格のための割り当て。

攻撃については一度お話しします。お尻でお見せします。そして、豊かに歌い、マージウィンドウで他のサードパーティのオブジェクトについて調べます。 だから、クモの巣に迷わないで、アップデートに従ってください！

アップデート：バージョンdm-modal.js v1.3（01/15/2017）
修正済み：廃止された.live（）関数を置き換え、構文href * = \\＃を変更しました。 これでプラグインが機能します 現在のバージョン jQueryライブラリ

なぜすべてなのか！ 私はspodіvayus、wiyshovは1つのkorisnyレッスンをscheします。

アンドリーに関して