使用CSS样式修复jQuery对话框中的空格

Question

我正在尝试使用CSS样式显示jQuery对话框，但是在对话框中有一小部分空白区域，

jQuery代码：

$('#success').dialog({
    //autoOpen: true,
    height: 180,
    width: 350,
    modal: true,
    resizable: false,
    dialogClass: 'no-close',
    buttons: [
        {
            text: "Add",
            click: function() {
                // Cancel code here
            }
        }
    ]
    //closeOnEscape: false,
    //open: function(event, ui) { $(".ui-dialog-titlebar-close", ui).hide(); }
    //closeOnEscape: false,
    //beforeclose: function (event, ui) { return false; },
});

HTML code：

<div id="popup-msg">
    <div id="loading">
        <h2>Loading...</h2>
        <h3>Please wait a few seconds.</h3>
    </div>  

    <div id="success" title="Add To List" style="border: 1px solid black">
        <p style="padding:0;">User table is updated.</p>
    </div>
</div>

JSFiddle

您对此问题的解决方案有什么建议吗？

Answer 1

将这些行添加到CSS：

.ui-dialog .ui-dialog-buttonpane
{
   margin-top: 0px;
}

Answer 2

您可以添加此CSS：

.ui-dialog .ui-dialog-buttonpane {
    margin: 0;
    border: 0;
}

<强> Updated Fiddle

Answer 3

这是插件的默认行为。您需要覆盖插件类

.ui-dialog .ui-dialog-buttonpane
{
margin:0px; 
}

我已将整个边距设为零，而不是margin-top，因为left，right，bottom已经为零