我有一个页面,我希望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的样式应用于必要的元素。仅当要应用的样式量非常少时才可以采用此方法。