样式化 jquery alertify-plugin答案

【问题标题】：styling jquery alertify-plugin样式化 jquery alertify-plugin
【发布时间】：2013-12-10 19:53:14
【问题描述】：

要更改 jquery alertify 插件的样式，我做了以下操作，这是头部，所有文件都以正确的顺序加载（我希望如此）：

<head>
    <meta charset="UTF-8" />

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="javascript/jquery-2.0.3.min.js"></script>

    <script type="text/javascript" src="alert/alertify.min.js"></script>
    <script type="text/javascript" src="javascript/onsubmit.js"></script>

    <link rel="stylesheet" href="alert/alertify.default.css" />
    <link rel="stylesheet" href="alert/alertify.core.css" />
    <link rel="stylesheet" href="alert/alertify.bootstrap.css" />
    <link rel="stylesheet" href="style/style.css" />

</head>

这是 onsubmit.js ：

$(document).ready(function(){
  $("form").submit(function(){
    var dump = $("#dump").val();
    if(dump) { 
        $.ajax({
            url: 'check.php',
            data: {data: JSON.stringify(dump)},
            type: 'POST',
            dataType: "json",
            success: function (data) {
                if(data.result == 1) {
                    alertify.alert( data.error, function() {}, 'popup1' ); // the first popup styled
                    return false;
                } 
                if(data.result == 0) {
                    alertify.alert( data.error, function() {}, 'popup1' ); // the second popup styled
                    return false;
                }           
            }
        });
    } else { 
        alertify.alert("message");
        return false;
    }

  });
});

style.css：

.alertify.popup1 {
    background: red;
}
.alertify.popup2 {
    background: blue;
}

但是接收到的数据的alert-box仍然正常显示并且没有被修改。我只是跟着他的步骤： How to insert an image into an alertify.js alert with JavaScript? ，我的 style.css 包含在 alertify.css 之后，所以有人可以帮我解决我的问题吗？问候

【问题讨论】：

您正在加载 jquery 1.9.1 和 2.0.3。您应该删除其中之一。不过，这不会是您的问题的原因..
看看我的回答，我认为它解决了问题

标签： jquery css plugins alertify

【解决方案1】：

删除双 jQuery 包含。

可能你没有设置第三个参数，用于自定义 UI：

[可选] 附加到对话框的类

代码：

$(document).ready(function() {
    $('#clicky').on('click', function(event) {
        event.preventDefault();
        alertify.confirm('Are you sure you want to delete this section?', function(e) {
            if (e) {
            }
        },'popup2');
    });
});

演示：http://jsfiddle.net/kBnPy/

【讨论】：