如何将弹出窗口的javascript和css与父页面隔离？

Question

问题：当我打开一个包含 javascript 和 css 的模态弹出页面时，两者都反映在父页面上，弄得一团糟。我使用 angularjs 并像这样打开模式：

var modalInstance = $modal.open({
animation: true,
templateUrl: 'myPopup.html',
controller: 'MyController',
scope: $scope   

});

即使当我关闭弹出窗口时，父页面也会继续混乱。如何以不反映在父页面上的方式隔离弹出 css 和 javascript？有没有简单的方法来做到这一点？

ps。我尝试创建一个新范围并将其作为参数传递给模式，期望父页面的 DOM 不会被修改，但没有成功。

编辑：组件的链接是this。

Answer 1

您能否修改 CSS，使其不包含适用于模板之外元素的规则？如果您可以通过为其容器提供 ID 来唯一标识您的模板，则可以修改规则，使其仅适用于该容器中的元素。至于 javascript，您也可以这样做，尽管它实际上取决于代码本身。您能否提供有关 CSS 和您正在使用的脚本的更多信息？

编辑：按照 Alex 的建议，可能的最佳方法是在模式中打开一个 iframe。为此，您在模式中呈现的模板 myPopup.html 将只包含一个指向 URL 的 iframe，并在通过该 URL 可用的页面中粘贴您的组件。至于与组件的通信，可以在 URL 中传递参数，然后按照here 或here 的说明进行读取。

如果您需要相反方向的通信，也就是说，如果用户与模态的交互应该以某种方式影响打开模态的页面，这将变得很棘手，因为您可能需要涉及服务器。