如何使用JavaScript將圖像插入alertify.js警報？

Question

我想創建一個帶有大圖像和OK按鈕的彈出對話框，為此我試圖自定義alertify.js的警報。

我的想法是使用默認圖像網址為所有這些“彈出警報”創建自定義css類，然后更改網址background-image: url(images/level_10.jpg); 當我用JavasScript創建彈出到右圖像時（因為你可以在調用函數時傳入一個自定義的cssClass ）;

我不確定這是否可行。

或者是否有更好的方法來自定義alertify.js來實現這一目標？

Answer 1

您可以覆蓋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');
};

檢查這個小提琴的工作例子;）