Question

我想更改样式JavaScript警报按钮，但我认为这是不可能的。尽管如此，jQuery对话框通常被提及作为建议的替代方案。

我发现以下代码（How to create jQuery Dialog in function）与我的代码集成似乎很有趣：

function createDialog(title, text) {
return $("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
.dialog({
    resizable: false,
    height:140,
    modal: true,
    buttons: {
        "Confirm": function() {
            $( this ).dialog( "close" );
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    }
});
}

问题：如何将上述功能与我的代码结合使用？显然，我根据操作有多个警报，例如：

print "
<script language=javascript>
var rndURL = (1000*Math.random());
alert(\"Page saved.\");
window.location = \"admin.php?action=managepage&parent=".$page->parent."&rnd=\"+rndURL;
</script>
";
exit();
}

另一个例子：

print "
<script language=javascript>
var rndURL = (1000*Math.random());
alert(\"Style saved.\");
window.location = \"admin.php?action=managestyle&rnd=\"+rndURL;
</script>
";
exit();
}

Answer 1

您必须手动更改它，例如从示例中更改标准OK btn的BG图像：

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
background-image:(your url)}

您需要做的就是确保在JQuery的UI css之后加载您的css

正如您所要求的那样：

function createDialog(title, text) {
return $("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
.dialog({
    resizable: false,
    height:140,
    modal: true,
    buttons: {
        "Confirm": function() {
            $( this ).dialog( "close" );
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    },
    open:function(){
        var allButtons = $("button", $(this).parent());
        //close button
        //$(allButtons[0]);

        //OK / Confirm button
        $(allButtons[1]).css("background-image",  "url(http://upload.wikimedia.org/wikipedia/commons/f/f1/HILLBLU_button_background.svg)");

        //Cancel button
        $(allButtons[2]).css("background-image", "url(http://upload.wikimedia.org/wikipedia/commons/f/f1/HILLBLU_button_background.svg)");

        //thats for you to see in the logs your buttons
        console.log(allButtons)
    }
});
}

Answer 2

你可以使用twitter bootstrap和html5一起用于漂亮的Modal / Dialog Window，因为你可以自定义bootstrap css

<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

请看下面的例子 http://hmelius.com/avant/ui-modals.php

Answer 3

您可以在javascript中完全替换警报和确认对话框。 Alertify和Bootbox就是这样的框架。或者你可以基本上这样做自己做：

window.alert = function(...){
    // ... open up whatever you'd like here ...
}

window.confirm = function(...){
    // ... open up an alert with more buttons and handle the interaction ...
}

jQuery对话功能

3 个答案: