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

Question

我在网页中创建了一个 JQuery 对话框，并在其中设置了几个按钮。我想确保 "Register Me" 按钮出现在按钮窗格的左角，"Maybe Later" 按钮出现在右角，所以我输入了一些代码来处理这个问题。这是 .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");
                            }
                        }
                    ]
            });

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

如果您查看对话框代码，您会发现我试图通过拦截对话框声明中的 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;
}

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

Setting position of JQuery dialog buttons causes buttonpane background color issue

jquery

css

jquery-ui

jquery-ui-dialog