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