如何使用JavaScript将图像插入alertify.js警报?

时间:2013-09-30 21:52:09

标签: javascript css alertify

我想创建一个带有大图像和确定按钮的弹出式对话框,为此我试图自定义alertify.js的警报。

我的想法是使用默认图片网址为所有这些“弹出式提醒”创建自定义css课程,然后在我向右侧创建弹出窗口时更改网址background-image: url(images/level_10.jpg);使用JavasScript的图片(因为您可以在调用函数时传入自定义cssClass);

我不确定这是否可行。

或者是否有更好的方法来自定义alertify.js来实现这一目标?

1 个答案:

答案 0 :(得分: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');
};

Check this fiddle for a workin example ;)