jGrowlとjQueryUIを混在させる方法

Growl

OSX用の有名なデスクトップ通知アプリにGrowlというものがあります。 (現在ではApple製のデスクトップ通知システムが標準搭載されてしまいましたが。)

GrowlのデザインはGrowl -> スクリーンショットで見る事ができます。

jGrowl

ブラウザ上で「Growl風デザイン」の通知を実現するものとして、jGrowl / GitHub:stanlemon/jGrowlというjQueryのプラグインがあります。

使い方

使い方は非常に簡単でjQueryとjGrowlをロードして以下の様に呼び出すだけです。

   $.jGrowl("ようこそ");

通知の表示や振る舞いに関する様々なオプションもあります。

表示

f:id:slowquery:20130212202558p:plain

jGrowlとjQuery UIとの混在

現象

このjGrowlはたいへん便利ですがjQuery UIと混在させると表示がこんな風になります。(jQuery 1.9, jQuery UI 1.10, jGrowl v1.2.7時点)

f:id:slowquery:20130212202604p:plain

解決法

Stack Overflowの以下のポストに理由や解決方法が載っています。

why jGrowl popup doesnt look as expected?

Webアプリ/サイトのCSSに以下を記述すると、

 div.jGrowl > .ui-state-highlight {
        background: inherit;
        color: inherit;
        border: inherit;
    }

元に戻ります。

f:id:slowquery:20130212202558p:plain