動態加載彈出窗口的css文件

我有一個頁面，我想用onclick來顯示彈出窗口用css樣式的用戶。
每個彈出窗口都是通過php後端的ajax獲取的，其中大多數需要不同的css文件。我不能在開始時包含所有的css文件，因爲有些文件會覆蓋其他文件，所以我必須爲特定的html動態加載特定的css文件。
所以我打這個動態加載彈出窗口的css文件

文件1：
鏈接類型= 「文/ CSS」相對= 「樣式的」 href = 「/ CSS/popup1.css」

文件2：
鏈接類型= 「文/ CSS」相對= 「樣式的」 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'); 
      }); 
     });

這似乎工作，但actualy這種方式有時也會失敗，我仍然不知道是什麼原因導致這個代碼有些事情可以正常工作，有時會失敗。
最讓我困擾的是這兩個解決方案的工作原理，有時候他們不會找到導致這種情況的具體行爲。

有人有什麼想法我該怎麼辦？

來源

2011-10-13 gotha

您面臨的問題可能是由於加載對話框html的css文件&的順序。如果首先加載CSS或HTML，行爲可能會有所不同。

解決這個問題有兩種方法。

最好有一個父容器到彈出窗口，並讓父容器上的樣式控制內部元素的樣式。示例代碼如下，

綠色> leftBox {....} 藍色> leftBox {....}
...
另一種方法是應用的樣式使用jQuery的必要元素。只有在應用的造型數量非常少的情況下才能採用這種方法。

來源

2011-10-13 16:42:33

它們每個都大約有600行CSS，所以在這種情況下應用js樣式並不行。我會試着包含所有的css文件，使它們成爲特定類，並只更改容器的類。我們會看到的。感謝您的建議 – gotha

嘗試添加一個錯誤處理程序，並檢查錯誤消息，找出您的問題

$.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); 
       });

你當然可以清除上面的代碼一點點。

來源

2011-10-13 17:08:44 Jags

動態加載彈出窗口的css文件

回答

相關問題