- 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
请帮忙。
最佳答案
这听起来像是基于 iframe 或 ajax 的模态弹出窗口的完美候选者。有许多可用于 jQuery 的... colorbox恰好是我目前最喜欢的。
下面是它如何与 colorbox 一起工作:
- 通过按 CSS 类定位登录链接来初始化颜色框。
- 将 colorbox 设置为使用“iframe”,这将在弹出窗口中加载您的登录页面
- 如果需要,您可以将查询字符串中的当前页面传递给模态弹出窗口,然后检索它并在登录页面上处理它。例如:
<a href="/Sign-in/Log-in?returnUrl=[INSERT CURRENT URL HERE]" class="modal">Sign-in</a>
(注意:这可以通过window.location.href
以编程方式完成,这样您就不必将当前 URL 硬编码到每个链接中)。 - 您可以使用 CSS 调整底层页面的“不透明度”。它实际上是位于页面顶部的 100% 高度/宽度的 div,但是,它会造成页面“变暗”或淡出的错觉。
- 关闭弹出窗口后,原始页面将重新出现在焦点中,但是,您也可以执行回调函数来刷新页面(因为用户现在已登录)。
关于jquery - 如何为多个主页面使用同一个子页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11456879/