jQuery对话框标题图标解决导致其他选项被忽略

Question

我希望这不会浪费任何人的时间......我现在一直在研究和尝试不同的解决方案，并且不能让它发挥作用。

我正在使用jQuery UI 1.10.1。我想在标题中添加一个图标。以下代码不适用于版本1.10.1：

$("#dialog").dialog(
{
    title: '<span class="ui-icon ui-icon-home"></span> Example Dialog'
});

所以，我使用以下代码作为解决方法：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
            {
                var eventDialog = $("#createEventForm").dialog();

                eventDialog.data("uiDialog")._title = function(title) 
                {
                    title.html(this.options.title);
                };

                eventDialog.dialog(
                {
                    title: "<span class=\"ui-icon ui-icon-pencil\" style=\"float: left; margin-right: 4px;\"></span> New Appointment",
                    modal: true,
                    autoOpen: false,
                    width: "auto",
                    buttons: [
                    {
                        text: "Save",
                        'click': function()
                        {
                            // do something with .ajax in here
                        },
                        icons: { primary: 'ui-icon-plus'}
                    },
                    {
                        text: "Cancel",
                        'click': function()
                        {
                            $(this).dialog("close");
                        },
                        icons: {primary: 'ui-icon-cancel'}
                    }]
                });
            });
</script>

现在图标在我想要的标题栏中，但是'modal'和'autoOpen'选项被忽略。 “宽度”和“按钮”选项按预期工作。

实际上，只有在页面加载时才会忽略它们。如果我关闭对话框，然后单击在我的html中触发它的按钮，则当对话框再次打开时，所有选项都会产生预期的效果。