将一个html页面覆盖在另一个页面上答案

【问题标题】：Overlaying one html page on another将一个html页面覆盖在另一个页面上
【发布时间】：2013-11-27 22:56:25
【问题描述】：

我想在另一个页面上覆盖一个 html 页面。我尝试在 div 中提供指向其他页面的链接，如下页所示：http://jquerytools.org/demos/overlay/external.html

但控件移动到另一个页面而不是停留在同一页面上。任何人都可以提出一个示例，其中一个新的 html 页面加载在主页面之上.. 我是网络新手请帮忙！

【问题讨论】：

第一个链接如何说明您的问题？你的意思是模态窗口/灯箱？
如果您单击查看详细信息，则应在主页顶部加载一个单独的 html 页面。
这是一项相当大的任务，并且有很多不同的选项来完成它。你有什么具体情况？它必须是 .html 文件吗？可以使用 iframe 吗？阿贾克斯呢？你有想要使用的最喜欢的灯箱/jquery 插件吗？关于您提供的 juqerytools 链接，您尝试了哪些代码失败了？
创建一个 z-index 高于页面中其他元素的 div，并在其中嵌入一个带有 seamless 的 iframe 并在该 iframe 中加载另一个页面 stackoverflow.com/a/20015831/1642219
我已经尝试了第二个链接中的代码。我提供了一个单独的背景图片。我什至尝试了 over-apple.css，然后用他们的 css 覆盖它。但控件转到另一个 html 页面，而不是停留在同一页面上并覆盖。在相同的基础上的答案会很好 - html,css,jquery

标签： jquery html css

【解决方案1】：

DEMO

我已使用 iframe 加载另一个页面（由于安全问题，浏览器将不允许外部域加载到 iframe/div 中，具体取决于外部域所有者的配置），您可以使用 div 来执行如果您从同一域获取页面，则使用 jquery's load 相同

$('div#page').load(source,function(e){$(this).fadeIn('slow')})

注意给定的演示不是通用/通用解决方案，您必须根据您的页面定制 css 部分

【讨论】：

【解决方案2】：

仅使用通用 html，您无法满足您的要求。理论上，您需要做的是将 html 页面加载到现有 div 中，然后通过某种动画在当前 div 和下一页 div 之间切换。

在解释了基本任务之后，我会告诉你，你正在寻找的是一个 JavaScript html 模板系统（如把手），而不是你可以在模板之间切换。使用 javascript 模板需要一些好的 javascript 知识，因为这只是一个开始。您还需要实现一个 js 路由器，以便轻松切换页面等等。您将要创建的是一个 SPA（单页应用程序）。

我建议您阅读有关单页应用程序的更多信息，它应该可以解决问题（只是谷歌“构建单页应用程序”）。

【讨论】：