1

大きな画像と [OK] ボタンを含むポップアップ ダイアログを作成したいので、alertify.jsのアラートをカスタマイズしようとしています。

私のアイデアは、cssこれらすべての「ポップアップアラート」のカスタムクラスをデフォルトの画像 URL でbackground-image: url(images/level_10.jpg);作成し、ポップアップを作成するときに URL を適切な画像に変更することでした (呼び出すときにJavasScriptカスタムを渡すことができるため)。cssClass関数）;

これが可能かどうかはまったくわかりません。

または、これを達成するために alertify.js をカスタマイズするより良い方法はありますか?

4

1 に答える 1

3

alertify の CSS クラスをオーバーライドできます。

以下の例を見てください: http://www.fabien-d.github.io/alertify.js/assets/js/lib/alertify/alertify.bootstrap.css

.alertifyあなたの場合、次のようにCSSクラスをオーバーライドしたいだけです:

.alertify.popup1 {
    background: url(path/file1.png);
}
.alertify.popup2 {
    background: url(path/file2.png);
}
/* etc */

そして、次のように Javascript を使用します。

$("alert1").onclick = function () {
 alertify.alert("This is an alert dialog", function() {}, 'popup1');
};
$("alert2").onclick = function () {
 alertify.alert("This is an other alert dialog", function() {}, 'popup2');
};

実際の例については、このフィドルを確認してください;）

于 2013-09-30T21:59:24.493 に答える