javascript - 为弹出窗口动态加载css文件

Question

我有一个页面，我希望在该页面上单击以向用户显示一种带有 css 样式的弹出窗口。
每个弹出窗口都是通过 ajax 从 php 后端获取的 html，其中大多数需要不同的 css 文件。我不能一开始就包含所有的 css 文件，因为有些会覆盖其他的，所以我必须为特定的 html 动态加载特定的 css。
所以我输入了这个

file1:
link type="text/css" rel="stylesheet" href="/css/popup1.css"

file2:
link type="text/css" rel="stylesheet" href="/css/popup2.css"
etc.
at the begining of every html popup.

这在大多数情况下都有效，但有时看起来 css 被忽略并且 html 显示在页面底部未设置样式。

我尝试加载 css 文件并将其附加到头部，然后像这样获取 html:

var css = document.createElement("link"); 
        $(css).attr('type', 'text/css');        $.get('/css/popup1.css', function(result){            $(css).html(result);            $('head').append(css);            $.get('/fetchHtmlPopup.php', function(data){                $(cotainer).html(data);                $(container).fadeIn('fast');            });        });

这似乎可行，但实际上这种方式有时也会失败，我仍然不知道是什么导致这段代码有时工作正常，有时却失败。
最让我困扰的是这两种解决方案都有效，但有时它们我无法找到导致此问题的特定操作。

有人知道我该怎么做吗？

Answer 1

您面临的问题可能是因为 css 文件和对话框 html 的加载顺序。根据是先加载 css 还是先加载 HTML，行为可能会有所不同。

有两种方法可以解决这个问题。

1. 弹窗最好有个父容器，让父容器的样式控制内部元素的样式。示例代码如下，

   绿色 > 左框 { .... } 蓝色 > 左框 { .... }

   ...

2. 另一种方法是使用 jquery 将样式应用于必要的元素。仅当要应用的样式数量非常少时，才可以采用这种方法。