javascript - jQuery 对话框函数

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

您可以将 twitter bootstrap 与 html5 一起使用，以获得漂亮的模态/对话框窗口，因为您可以自定义 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