Как вставить изображение в оповещение alerttify.js с помощью JavaScript?

Question

Я хочу создать всплывающее диалоговое окно с большим изображением и кнопкой ОК, и для этого я пытаюсь настроить оповещения на сайте alerttify.js.

Моей идеей было создать кастом css Класс для всех этих "всплывающих предупреждений" с URL-адресом изображения по умолчанию, а затем измените URL background-image: url(images/level_10.jpg); когда я создаю всплывающее окно на нужное изображение с JavasScript (потому что вы можете перейти в обычай cssClass когда вы вызываете функцию);

Я не уверен, возможно ли это вообще.

Или, может быть, есть лучший способ настроить alerttify.js для достижения этой цели?

Answer 1

Вы можете переопределить класс CSS alerttify.

Просто посмотрите пример ниже: 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');
};

Проверьте эту скрипку для рабочего примера;)