Jquery - ポップアップが開始されました...残りの作業を行う方法

Question

さまざまな機能を備えたきれいなjqueryポップアップを作成しようとしています。私はプラグインを使用したくない（と私は笑を学びたい）。ここに私が欲しいものがあります。

1. 画面の中央にそれを（それが行われ、働いている）
2. それの外に近いというポップアップするたびにユーザーがクリック。 （私たちはポップアップ思考の内側をクリックできる必要があります）
3. クリックしたリンクに応じて、ポップアップのHTMLコンテンツを変更します。 （例：私はリンク1、リンク2のフォームのための私のポップアップ内のリストが欲しい） - （すべてでそれを行う方法はありませんアイデア）

は今ここに私が持っているものです。http://jsfiddle.net/RYwsy/2/

私はいくつかの研究をしましたが、そこにはいろいろなテクニックがあり、完全に失われています。そして、私はjQueryで最もクリーンな/最速の方法を可能にしたいと思います。

まだ検索して試していますが、私も助けてください。

ありがとうございます！

Answer 1

うわー、これは期待...かいつまんよりもトリッキーだった、私はあなたのフィドルを編集した：Here、それが機能するようになりました。

編集：新しいフィドルもっときれいにイベントの伝播を使用しています：http://jsfiddle.net/RYwsy/23/

ポイント3は非常に簡単でした。コンテンツがページのどこかから来るようにしたい場合は、クリックされたリンクのいくつかのプロパティ、またはその兄弟などを見ているようなコンテキストに基づいてコンテンツを探します。私の例では、私はちょうどid属性をリンクに追加し、それを使ってコンテンツを含む隠しdivを特定し、それをポップアップに挿入しました。

ポイント2はもっとトリッキーでした。最初は、ポップアップ以外のすべてにクリックハンドラをアタッチして、そこにポップアップを隠しました。ポップアップからのクリックイベントがdomを伝播し、最終的にいくつかの要素に到達したため、ポップアップを隠してしまったため、これはうまくいかなかった。私は、ポップアップをクリックしているかどうかをチェックし、もしそうであればそこに伝播を止めました。これはクリーンなソリューションであるかどうか

は、おそらく非常に議論の余地があるが、それはかなりきれいで、他に何もあなたがにコンテンツをしたいですか

Answer 2

あなたは、ポップアップでHTMLをロードするために、このようなものを使用することができます -

$('a').click(function(e) { 
    e.preventDefault(); 
    var thisHREF = $(this).attr('href'); 
    $('popup').load(thisHREF); 
});