HTL - 如何在另一个页面上显示页面，如弹出/模式答案

【问题标题】：HTL -how to display a page on another page like popup / modalHTL - 如何在另一个页面上显示页面，如弹出/模式
【发布时间】：2017-02-09 12:46:24
【问题描述】：

我正在尝试使用现有页面（通过 TouchUI 中的路径浏览器选择）作为我的 HTL 页面上的弹出窗口/模式。有没有办法从不同的文件中添加/注入 HTML ？更多的是在页面上显示和呈现该 html，而不是如何构建对话窗口。

【问题讨论】：

标签： adobe aem sightly htl

【解决方案1】：

您需要在页面中包含内容（而不是模板），最好使用 data-sly-resource 和页面路径 (/content/myapp/content/myPageIwantToDisplayAsModal)。这将在您的页面上呈现相关的 html - 请记住，在 AEM 中，内容知道如何显示自身 - 因此如上所述，您只需要引用内容

也许您还可以利用选择器不显示整个 html 以及 <head> 部分和不需要的 <body> 标签

例如：

<div data-sly-resource="${'/content/myapp/content/myPageIwantToDisplayAsModal' @ selectors=['content']}"></div>

参考这里https://docs.adobe.com/docs/en/htl/docs/block-statements.html

【讨论】：

【解决方案2】：

一种方法是使用引用组件并注入被引用页面的 HTML。然后，您可以使用 JS/CSS 魔术将其包装/样式化为弹出窗口。

【讨论】：

我正在查看但这似乎不起作用..弹出不是问题（css和js）如何注入html代码
使用 data-sly-resource 而不是包含