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

Answer 2

jquery ui还有一个名为IEEE 64-bit doubles的选项 这对我有用：

<style>
.yellow-dialog {
  background-color: yellow;
}
</style>

<div id="my-dialog">Hello</div>

<script>
$("#my-dialog").dialog({
  modal: true,
  dialogClass: "yellow-dialog"
});
</script>