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;
}

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

1 个答案: