我有一个页面,我希望onclick可以向用户显示使用CSS样式的弹出窗口。
每个弹出窗口都是通过ajax从php后端通过html提取的,其中大多数需要不同的css文件。一开始我不能包含所有css文件,因为有些文件会覆盖其他文件,因此我必须为特定的html动态加载特定的css。
所以我输入了


  文件1:
  链接type =“ text / css” rel =“ stylesheet” href =“ / css / popup1.css”
  
  文件2:
  链接type =“ text / css” rel =“ stylesheet” href =“ / css / popup2.css”
  等等
  
  在每个html弹出窗口的开头。


在大多数情况下,这是可行的,但有时看起来像CSS会被忽略,而html会以未样式显示在页面底部。

我尝试加载css文件并将其附加到head,然后像这样获取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');
            });
        });


这似乎可行,但实际上这种方式有时也会失败,而且我仍然不知道是什么导致此代码使某些代码正常工作,有时会失败。
最让我困扰的是两个解决方案都起作用的事实,有时它们找不到导致此问题的特定措施。

有人知道我该怎么办吗?

最佳答案

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

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


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


    绿色> leftBox {....}
    蓝色> leftBox {....}



    ...

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

07-24 09:44
查看更多