0 
- Have 5 pages
- Each page has a link for "Sign-in/Log-in" on the topbar
- Lets say user is on "HomePage" and he clicks "Log-in" button on the topbar
- I want "Homepage" to go in background (opacity=0.2) and put the "Log-in" pop-up in front (z-index: 100)
- Same behavior is expected for all 5 pages -

私がしたことは次のようなものです：

-----------------Page 1----------
div.HomePage
  div.accountPage
-----------------Page 2----------
div.BrowsePage
  div.accountPage
-----------------Page 3----------

...

次に、実行時にjavascriptを使用して不透明度とz-indexプロパティを設定します。メインページごとにHTML/jadeでaccountPageのコードを5回繰り返していますが、JavaScriptコードはこのアプローチではきれいに見えません。

- What I want is to create a TOTALLY SEPARATE "accountPage",
- Display on it click of "Login" button.
- Find out which of the 5 main pages user was on **/* This I dont know how to do */**
- Set that main page to background with opacity = 0.2
- Popup the accountPage for Login in front.
- After Login or cancel, bring the main page (user was on), back to focus

助けてください。

4

1 に答える 1

0

これは、iframe または ajax ベースのモーダル ポップアップに最適な候補のように思えます。jQuery で利用できるものはたくさんあります... colorboxはたまたま私のお気に入りです。

カラーボックスでの動作は次のとおりです。

  1. サインイン リンクのカラーボックスを CSS クラスでターゲットにして初期化します。
  2. ポップアップ内にサインインページをロードする「iframe」を使用するようにカラーボックスを設定します
  3. 必要に応じて、現在のページをクエリ文字列でモーダル ポップアップに渡し、それを取得してサインイン ページで処理できます。例: <a href="/Sign-in/Log-in?returnUrl=[INSERT CURRENT URL HERE]" class="modal">Sign-in</a>(注: これはプログラムで実行できるwindow.location.hrefため、現在の URL を各リンクにハードコードする必要はありません)。
  4. CSS を使用して、下にあるページの「不透明度」を調整できます。実際には、ページの上部にある 100% の高さ/幅の div ですが、ページが「淡色表示」またはフェードアウトしているように見えます。
  5. ポップアップを閉じると、元のページが再び表示されますが、コールバック関数を実行してページを更新することもできます (ユーザーがサインインしているため)。
于 2012-07-12T17:20:50.683 に答える