9

私は自分のサイトでこの jGrowl 通知を受け取りました。通知ボックスのポップされた jGrowl ポップアップがうまくスタイルされていないように見えます。

これは私がjgrowファイルを呼び出す方法です

<link rel="stylesheet" type="text/css" href="./include/jgrowl/jquery.jgrowl.css" />

これは通知ボックスです

代替テキスト http://hinuts.com/jgrowl.look.png

4

4 に答える 4

25

jGrowl と同じページで jQuery UI のスタイルシートを参照している場合、jGrowl コンテナーのスタイルが影響を受けます。jGrowl バージョン 1.2.2 の時点で、すべての jGrowl コンテナーは CSS クラス「ui-state-highlight」で装飾されており、スタイル定義に背景、境界線、およびフォントの色が追加されています。

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background:url("images/ui-bg_glass_55_fbf9ee_1x400.png") repeat-x scroll 50% 50% #FBF9EE;
    border:1px solid #FCEFA1;
    color:#363636;
}

この動作を防ぐには、jquery.jgrowl.css ファイルに次の追加を行います。

div.jGrowl > .ui-state-highlight {
    background: inherit;
    color: inherit;
    border: inherit;
}
于 2010-08-26T18:07:01.427 に答える
1

Firebug または CSS ファイルに !important 宣言 (例: background-color: red !important;) を追加し、スタイルが正しく適用されているかどうかを確認します。もしそうなら、あなたのルールは、より特異性の高いルール (またはあなたのルールの後に同じ特異性で適用されるルール)によって上書きされています。

編集: jGrowl テスト ページを作成し、その通知が正しく表示されます。頭の中で他のスタイル シートをコメント アウトしてみて、問題が解決しないかどうかを確認してください。また、ファイルが指定されたディレクトリにあることを確認してください。(./は冗長で必要ありません:.現在のディレクトリを示しているため、参照./folder/test.jsは単に と同じですfolder/test.js)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  

    <link rel="stylesheet" href="jquery.jgrowl.css" type="text/css" />
    <link rel="stylesheet" href="examples/css/redmond/jquery-ui-1.7.2.custom.css" type="text/css" />

    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="examples/jquery.ui.all.js"></script>
    <script type="text/javascript" src="jquery.jgrowl.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
        $.jGrowl( "jGowl test", { sticky: true } );
    });
    </script>

</head>
<body>
</body>
</html>
于 2010-07-30T17:46:49.117 に答える
0

firebug を使用して、ポップアップ ボックスに適用されている css を確認します。css の一部は、自分で作成した css によって上書きされている可能性があります。

于 2010-07-27T19:58:32.157 に答える
0

jquery-ui-1.7.2.custom.css がスタイリング クラスを jgrowl 通知オブジェクトに追加していると思います。私はcssのデバッグが得意ではないので、修正方法がわかりません。jquery-ui-1.7.2.custom.css リンクをコメントアウトして、jgrowl 通知が期待どおりに見えるかどうかを確認してください。

于 2010-07-30T17:37:01.443 に答える