How to insert an image into an alertify.js alert with JavaScript?

Question

I want to create a pop-up dialog with a large image and an OK button and for this I'am trying to customize the alerts of alertify.js .

My idea was to create a custom css class for all these "popup-alerts" with an default image url, and then change the url background-image: url(images/level_10.jpg); when I create the pop-up to the right image with JavasScript (because you can pass in a custom cssClass when you call the function);

I'm not sure whether this is possible at all.

Or is there maybe better way to customize alertify.js to achieve this?

Answer 1

You can override the CSS class of alertify.

Just look the example below: http://www.fabien-d.github.io/alertify.js/assets/js/lib/alertify/alertify.bootstrap.css

In your case, you just want to override .alertify CSS class like this :

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

And use the Javascript like this:

$("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 ;)