设置 JQuery 对话框按钮的位置会导致按钮窗格背景颜色问题

Question

我在我的网页中创建了一个 JQuery 对话框，并在其中设置了几个按钮。我想确保“注册我”按钮出现在按钮窗格的左角，而“也许稍后”按钮出现在右上角，所以我输入了一些代码来处理这个问题。这是.dialog()声明的完整代码：

                $("#register").dialog({
                    create   : function(ev, ui) {
                    $(this).parent().find('.ui-dialog-buttonpane').css('background-color', '#ffffff;');
                },
                appendTo: "form",
                autoOpen: false,
                show: { effect: "fadeIn" },
                hide: { effect: "fadeOut" },
                modal: true,
                draggable: false,
                minWidth: 750,
                minHeight: 400,
                resizable: false,
                dialogClass: "no-close",
                buttons:
                    [
                        {
                            class: "firstButton",
                            text: "Register Me",
                            click: function () {
                                $.ajax({
                                    url: "/services/register.asmx",
                                    timeout: 30000,
                                    type: "POST",
                                    data: $('#modalform').serialize(),
                                    dataType: 'json',
                                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                                        alert("An error has occurred making the request: " + errorThrown)
                                    },
                                    success: function (data) {
                                        $(this).dialog("close");
                                    }
                                })
                            }
                        },
                        {
                            class: "lastButton",
                            text: "Maybe Later",
                            click:function () {
                                $(this).dialog("close");
                            }
                        }
                    ]
            });

从按钮声明中可以看出，我为每个按钮添加了一个类，它可以根据需要将按钮向左或向右浮动。这一切都有效，按钮出现在对话框的左右角，正如我所料。 问题 是，只要我不尝试定位按钮，它们就会作为对话框“按钮窗格”的一部分出现在白色背景上。不过，在我设置按钮位置的那一刻，底层按钮窗格的背景变为透明，所以现在按钮似乎漂浮在对话框下方，如下所示：

如果您查看对话框代码，您会发现我试图通过拦截对话框声明中的 create 事件来覆盖 jquery 样式来解决此问题：

$(this).parent().find('.ui-dialog-buttonpane').css('background-color', '#ffffff;');

但是，这似乎不起作用。所以我决定在创建对话框后尝试通过添加以下代码来更改它：

 $('.ui-dialog-buttonpane').css('background-color', 'white');

对此也不满意。我也尝试在我的样式表中设置代码来实现这一点，使用这个：

.ui-dialog-buttonpane {
  background-color:#ffffff !important;
}

它也没有效果。谁能告诉我我在这里缺少什么，因为我没有想法。谢谢！

Answer 1

没有复制问题的示例很棘手，但我猜你需要的是

Clear the Floats

尝试在你的 CSS 中添加这个：

.ui-dialog-buttonpane:after {
  content: "";
  display:table;
  clear:both;
}