JQuery 对话框 - 使背景透明但仍可移动

Question

我正在尝试添加透明的 JQuery 对话框。但我遇到了两个问题:

• 文本“Hello”的背景不会变得透明
• 删除标题栏后，我无法再拖动对话框

这些评论是我迄今为止尝试过的。

    //Create new components
    var newComponent= "<div id='Component"+ componentOffset  +"' class='ui-widget'><h1>Hello</h1></div>";
    $('#rootArea').append(newComponent);
    $('#Component' + componentOffset).dialog({
        dialogClass: 'transparent-dialog'
    });
    //$('#Component' + componentOffset).css('background-color', 'rgba(255,255,255,0.0)');
    //Adding style to newComponent div: style='background-color: rgba(255,255,255,0.0); '

CSS:

.transparent-dialog {
    background-color: rgba(255,255,255,0.0);    
}

.transparent-dialog .ui-dialog-titlebar {
display:none
}

目标是使其仅在悬停时显示边框和背景。我想我也可以在悬停时再次显示标题栏。这样我仍然可以拖动组件而不会遇到太多麻烦。

Answer 1

要使所有 jQueryUI 对话框透明，只需通过将以下内容添加到自定义 CSS 文件来覆盖小部件的默认样式(不需要添加自定义 .transparent-dialog类作为结果):

CSS:

.ui-widget-header {
  border: none;
  background: transparent;
}
.ui-widget-content {
  background: transparent;
}

如果您希望只有一个特定对话框是透明的，而其他对话框保留背景，那么您可以使用您的 id 来定位它或为其指定一个附加类，例如:

.transparent-dialog {
  background: transparent;
}
.transparent-dialog .ui-widget-header {
  border: none;
  background: transparent;
}
.transparent-dialog .ui-widget-content {
  background: transparent;
}