私たちの多くは、背景が徐々に消えていくときにポップアップに遭遇しました。 ユーザーの視線は、画面のそのユーザーに何かが必要な部分にのみ意図的に焦点を合わせます。 十分参考になりましたよね？
もちろん、私はどんな種類の目新しさのふりもしません。この記事は、このjavascriptフレームワークの経験が豊富な人よりも、jQuery（私自身）の初心者にとってより有用です。
例
例として、yandexにアカウントを作成しました。 多くの意見がある場合、彼らが禁止されないことを願っています。 そのため、結果として得たいものは、 ここにあります 。
説明
当社のウェブサイト上のリンクをクリックすると、ポップアップウィンドウがユーザーに表示され、ユーザーから何らかのアクション（フォームへの入力や送信など）が必要になります。 同時に、このウィンドウの周囲のページの残りの部分はフェードアウトし、半透明の暗い背景の後ろに隠れ、視覚的に背景に移動します。 ユーザーはデータを入力してフォームを送信するか、フォームを拒否し、その後、以前のページに戻ります。
実装
まず、 jQueryライブラリの最新バージョンが必要です（執筆時点ではバージョン1.3.2が利用可能です）。
次に、レイアウトの最初に、2つのブロックを配置します。
- 「Opaco」-これは、ウィンドウの周りの余分な部分を隠す暗いレイヤーになります。
- 「ポップアップ」-これは、必要なコンテンツを挿入するブロックです。
< div id ="opaco" class ="hidden" ></ div >
< div id ="popup" class ="hidden" ></ div >
* This source code was highlighted with Source Code Highlighter .
次に、リンクとフォーム自体を追加する必要があります。これらはデフォルトで非表示になります。
エラーフォーム：
< div class ="user-actions" >
< p class ="bug" >< a href ="#" onCLick ="showPopup('bug'); return false;" > ! </ a ></ p >
</ div >
< div id ="popup_bug" class ="hidden" >
< div class ="bug" >
< form action ="#" class ="bug" >
< h3 > a </ h3 >
< div class ="form_error" ></ div >
< p > , : </ p >
< input type ="text" />
< p > : </ p >
< textarea rows ="5" cols ="30" ></ textarea >
< input type ="button" value ="" onclick ="closePopup(); return false;" />
< input type ="button" value ="" onclick ="closePopup(); return false;" />
</ form >
</ div >
</ div >
* This source code was highlighted with Source Code Highlighter .
たとえば、両方のボタンにアクションを割り当てます-フォームを閉じます（closePopup（））。
フィードバックフォーム：
< div class ="user-actions" >
< p class ="reference" >< a href ="#" onCLick ="showPopup('reference'); return false;" > ! </ a ></ p >
</ div >
< div id ="popup_reference" class ="hidden" >
< div class ="reference" >
< form action ="#" >
< h3 > </ h3 >
< div class ="form_error" ></ div >
< p > : </ p >
< textarea rows ="5" cols ="30" ></ textarea >
< input type ="button" value ="" onclick ="closePopup(); return false;" />
< input type ="button" value ="" onclick ="closePopup(); return false;" />
</ form >
</ div >
</ div >
* This source code was highlighted with Source Code Highlighter .
したがって、ポップアップウィンドウを表示および閉じる機能を開始できます。 以下を表示することから始めるのが論理的です：
//open pop-up
function showPopup(popup_type)
{
//when IE - fade immediately
if ($.browser.msie)
{
$( '#opaco' ).height($( document ).height()).toggleClass( 'hidden' );
}
else
//in all the rest browsers - fade slowly
{
$( '#opaco' ).height($( document ).height()).toggleClass( 'hidden' ).fadeTo( 'slow' , 0.7);
}
$( '#popup' )
.html($( '#popup_' + popup_type).html())
.alignCenter()
.toggleClass( 'hidden' );
return false ;
}
* This source code was highlighted with Source Code Highlighter .
関数の最初の部分は、id = "opaco"のブロックを処理します。 まず、このブロックにはjqueryメソッドheightを使用してドキュメント全体に等しい高さが割り当てられます。 これは、スクロールの下にあるページのその部分でさえ暗くするために必要です。 さらに、ここでは2種類のメソッドを一度に使用します-引数を渡さない場合は、オブジェクトの現在の高さの値を取得し（例では$（document）.height（）があります）、引数を渡す場合は、作業中のオブジェクトに割り当てます高さを指定したアクション（この例では、オブジェクトは$（ '＃opaco'）です）。
これで、「＃opaco」ブロックがドキュメント全体をカバーして表示し、「hidden」クラス（ toggleClass （「hidden」））が削除されたことを確認できます。
ブラウザに応じて、私たちは調光を行います：IEがフェードに成功しない場合（そして試行さえしません）、他のすべての場合では、 fadeToメソッドを使用してブロックを徐々に暗くします（ 'slow'、0.7） 。
関数の後半は次のブロックを処理します-id = "popup"。
まず、関数に渡される値に応じて、このブロックに必要なコンテンツを入力します。
最後のアクションで、このブロックを表示し、「非表示」クラスを再度削除します。
しかし、中央で行うこと-名前から、ブロックを中央に揃えることが明らかです。 実際、私たちのページには表示用のいくつかの異なる潜在的なブロックがあり、それらはすべてコンテンツに応じて異なる高さと幅になる可能性があるため、各ブロックは画面の中央に配置されます-異なるインデントを適用する必要があります。
alignCenterは、定義したメソッドであり、標準のjQueryパッケージにはありません。 メソッドの定義は非常に簡単です。
//additional properties for jQuery object
$( document ).ready( function (){
//align element in the middle of the screen
$.fn.alignCenter = function () {
//get margin left
var marginLeft = Math.max(40, parseInt($(window).width()/2 - $( this ).width()/2)) + 'px' ;
//get margin top
var marginTop = Math.max(40, parseInt($(window).height()/2 - $( this ).height()/2)) + 'px' ;
//return updated element
return $( this ).css({ 'margin-left' :marginLeft, 'margin-top' :marginTop});
};
});
* This source code was highlighted with Source Code Highlighter .
まず、ブラウザでドキュメントのDOM全体を読み込んだ後、それを決定する必要があります。そのために、jQueryメソッド$（document）.ready（）を使用します。
メソッド内では、最初に単純な式を使用して上部のインデントを見つけ、左側のインデントを見つけます。 これを行うには、クライアントの画面サイズとポップアップウィンドウのサイズが必要です。 ここでのjQueryの便利なプロパティは、$（this）を使用してメソッドを適用するオブジェクトにアクセスする機能です。 したがって、ポップアップブロックのサイズに応じて、必要なインデントを動的に計算します。 念のため、ポップアップブロックが非常に大きい場合や画面サイズが非常に小さい場合は、画面の左境界を超えないように最小インデントを40pxに設定します。
最後に、これらの新しいインデントを適用する必要があります。これはcssメソッド（{'margin-left'：marginLeft、 'margin-top'：marginTop}）を使用して行います。
ディスプレイが完成したら、それは小さいままです-ユーザーが作業を終えたらウィンドウを閉じます：
まず、両方のブロックに「非表示」クラスを追加して、それらを非表示にします。 さらに、id = "opaco"のブロックからスタイル属性を削除する必要があります。 前に使用したfadeToおよびheightメソッドは、この属性を要素に追加することにより実装されます。//close pop-up box
function closePopup()
{
$( '#opaco' ).toggleClass( 'hidden' ).removeAttr( 'style' );
$( '#popup' ).toggleClass( 'hidden' );
return false ;
}
* This source code was highlighted with Source Code Highlighter .
CSSについて-他のすべての要素をカバーするために、z-index：10を「#opaco」ブロックに配置することは注目に値します。 「#opaco」の上に、z-indexを割り当てたポップアップウィンドウが表示されます：11。
誰かが助けてくれることを願っています。
UPDはjQueryブログに移動しました。
Auruの提案による UPD2は、popupを独立したjQueryメソッドにしました。同じ例がここにあります 。
これを行うには、togglePopup（）メソッドを追加しました。
$.fn.togglePopup = function (){
//detect whether popup is visible or not
if ($( '#popup' ).hasClass( 'hidden' ))
{
//hidden - then display
//when IE - fade immediately
if ($.browser.msie)
{
$( '#opaco' ).height($( document ).height()).toggleClass( 'hidden' );
}
else
//in all the rest browsers - fade slowly
{
$( '#opaco' ).height($( document ).height()).toggleClass( 'hidden' ).fadeTo( 'slow' , 0.7);
}
$( '#popup' )
.html($( this ).html())
.alignCenter()
.toggleClass( 'hidden' );
}
else
{
//visible - then hide
$( '#opaco' ).toggleClass( 'hidden' ).removeAttr( 'style' );
$( '#popup' ).toggleClass( 'hidden' );
}
};
* This source code was highlighted with Source Code Highlighter .
つまり、本質的に、showPopup関数とclosePopup関数はこのメソッドに転送されました。
このウィンドウを呼び出すには、このメソッドを表示するブロックの名前を指定します。たとえば、次のとおりです。
リンクをクリックするとポップアップが開きます。< a href ="#" onCLick ="$('#popup_bug').togglePopup(); return false;" > ! </ a >
* This source code was highlighted with Source Code Highlighter .
そして、ほとんどのポップアップウィンドウで、閉じるボタンにまったく同じアクションを掛けます。この場合のみ、ポップアップが閉じます。
< input type ="button" value ="" onclick ="$('#popup_bug').togglePopup(); return false;" />
* This source code was highlighted with Source Code Highlighter .
dshster の アドバイス によると、 UPD3は 、ブラウザーウィンドウのサイズが変更されたときにブロックが中央に配置されるように、少しの座標計算をやり直しました 。 ここに例を見ることができます 。
これを行うには、「＃popup」のCSSプロパティに以下を追加します。
left:50%;
top:50%;
また、alignCenter（）メソッドでは、負のマージンを開いたときのブロックの幅の半分と見なします。
$.fn.alignCenter = function () {
//get margin left
var marginLeft = - $( this ).width()/2 + 'px' ;
//get margin top
var marginTop = - $( this ).height()/2 + 'px' ;
//return updated element
return $( this ).css({ 'margin-left' :marginLeft, 'margin-top' :marginTop});
};
* This source code was highlighted with Source Code Highlighter .
UPD4にはいくつかのコメントがありました。これは暗い背景をクリックすると便利です 。ウィンドウを閉じる必要があります。 同意する、それは便利だろう。 ここで動作します 。
これに必要なのは、ウィンドウが表示されたら、 '＃opaco'ブロックのクリックイベントでtogglePopupメソッドをハングさせ、ウィンドウが閉じた瞬間にこのアクションを解くだけです。
ハンドラーをチェーンにバインドする機能は非常に役立ちますので、目的のDOMオブジェクトを再度探す必要はありません。 onclickイベントを追加します。
//when IE - fade immediately
if ($.browser.msie)
{
$( '#opaco' ).height($( document ).height()).toggleClass( 'hidden' )
.click( function (){$( this ).togglePopup();});
}
else
//in all the rest browsers - fade slowly
{
$( '#opaco' ).height($( document ).height()).toggleClass( 'hidden' ).fadeTo( 'slow' , 0.7)
.click( function (){$( this ).togglePopup();});
}
* This source code was highlighted with Source Code Highlighter .
そして、閉じるとき、私たちは解きます：
$( '#opaco' ).toggleClass( 'hidden' ).removeAttr( 'style' ).unbind( 'click' );
* This source code was highlighted with Source Code Highlighter .