Jquery 如何对多个主页使用同一子页

我所做的是：

- 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 -

然后，我在运行时使用javascript设置不透明性和z索引属性。我在HTML/jade中为每个主页重复accountPage的代码5次，而且javascript代码看起来并不干净

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

...

---

请提供帮助。

这听起来像是iframe或基于ajax的模式弹出窗口的完美候选。有许多可用于jQuery。。。正好是我现在最喜欢的

以下是它如何与colorbox配合使用：

通过CSS类对登录链接上的colorbox进行初始化

将colorbox设置为使用“iframe”，它将在弹出窗口中加载您的登录页面

如果需要，您可以将查询字符串中的当前页面传递给模式弹出窗口，然后检索它并在登录页面上处理它。例如：

（注意：这可以使用

window.location.href

以编程方式完成，这样您就不必将当前URL硬编码到每个链接中）

您可以使用CSS调整基础页面的“不透明度”。它实际上是一个100%高/宽的div，位于页面顶部，但是，它会造成页面“变暗”或褪色的错觉

关闭弹出窗口后，原始页面将重新显示为焦点，但是，您也可以执行回调函数来刷新页面（因为用户现在已登录）

---

让我试试这个。感谢您的快速回复。

- 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