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?
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');
};