jquery - JQuery 对话框按钮的设置位置导致按钮 Pane 背景颜色问题

Question

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

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

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