Question

我有一个页面，我希望onclick显示用户使用css设置的弹出式窗口。
每个弹出窗口都是通过php后端的ajax获取的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”
  等等
  在每个html弹出窗口的开头。

大部分时间都可以使用，但有时看起来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');
            });
        });

这似乎有效，但实际上这种方法实际上也失败了，我仍然不知道是什么原因导致这段代码工作正常，有时会失败。
令我困扰的是这两个解决方案都有效，有时他们不会t I can找到导致此问题的具体行动。

任何人都知道我该怎么办？

Answer 1

您遇到的问题可能是因为css文件＆amp;对话框html已加载。根据首先加载css还是HTML加载行为可能会有所不同。

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

最好在弹出窗口中放置一个父容器，让父容器上的样式控制内部元素的样式。示例代码如下，

绿色＆gt; leftBox {....} 蓝色＆gt; leftBox {....}
...
另一种方法是使用jquery将样式应用于必要的元素。只有当要应用的样式量非常少时，才能采用这种方法。

Answer 2

尝试添加错误处理程序并检查错误消息以找出问题

$.get(
url: "/css/popup1.css", 
success: function(result){
            $(css).html(result);
            $('head').append(css);

            $.get({
                url: "/fetchHtmlPopup.php",
                success: function(data){
                        $(cotainer).html(data);
                        $(container).fadeIn("fast");
                    },
                error: function (xhr, ajaxOptions, thrownError){
                    alert(xhr.status);
                    alert(thrownError);
                });
       },
error: function (xhr, ajaxOptions, thrownError){
                    alert(xhr.status);
                    alert(thrownError);
                } );

你当然可以清理一下上面的代码。

动态加载弹出窗口的css文件

2 个答案: