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

【问题标题】：JQuery dialog - make background transparent but still moveableJQuery 对话框 - 使背景透明但仍可移动
【发布时间】：2014-08-31 09:14:56
【问题描述】：

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

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

目前为止我尝试过的 cmets。

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

目标是让它只在悬停时显示边框和背景。我想我也可以在悬停时再次显示标题栏。这样我仍然可以毫不费力地拖动组件。

【问题讨论】：

标签： jquery jquery-ui dialog transparency

【解决方案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;
}

【讨论】：

我有几个对话框。只有一两个应该是透明的。所以我不能使用默认的css元素。
见我回答的第二部分。
第一部分完美。第二个没有，但可能是我做错了什么。
还需要将“.transparent-dialog”类设置为透明。像魅力一样工作，谢谢！
很高兴你得到它。更新了我的答案以反映对您有用的方法，希望对其他人有所帮助。

【解决方案2】：

jquery ui 还有一个名为dialogClass 的选项这对我有用：

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

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

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

【讨论】：