jQuery模态对话框打开时按钮被选中

Question

我有一个设计如下的对话框：

<div id="choose_product" title="Choose a Product" style="display:none;">
    <button id="sel_1">Prod. 1</button>
    <button id="sel_2">Prod. 2</button>
</div>

使用JS：

    $('#choose_product').dialog({
            autoOpen: true,
            show: "blind",
            hide: "explode",
            modal: true,
            buttons: {
                Cancel: function(){
                    $(this).dialog("close");
                }
            }
        });

当对话框打开时，默认情况下选择了Prod 1按钮（高亮显示），我不知道为什么。您可以在此 JSFiddle 上看到它。当您单击RUN时，您会看到 Prod. 1 按钮默认被选中。有人知道为什么会出现这种情况吗？我做错了什么吗？

谢谢！

**编辑**

在我的应用程序中，我实际上使用 $（'#choose_product'）.dialog（“open”）; 打开对话框。如果您紧接着使用 $（'#choose_product：button'）.blur（）; ，则不会默认选择任何按钮。一个小小的解决方法，但似乎有效。

请参见更新的示例。

- jeffery_the_wind

Answer 1

我的假设是，当您为jQuery UI对话框指定“模态”类型时，它会自动聚焦第一个按钮。此外，它未正确样式化的原因是因为您没有在代码片段中添加css。

编辑：经过更多研究，我发现this question证实了我上面所说的。

- chrisn