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

我想添加一个透明的JQuery对话框。但我遇到两个问题：JQuery对话框 - 使背景透明，但仍然可移动

上的文字的背景下，“你好”，不会成为透明
删除标题栏后，我再也不能拖动对话框

评论是我到目前为止所尝试的。

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

enter image description here

的目标是让它只显示边框和背景在上空盘旋。我想我可以在悬停时再次显示标题栏。这样我仍然可以拖动组件，而不会有太多麻烦。

来源

2014-08-31 Reinard

为了使所有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; 
}

来源

2014-08-31 09:39:58 jme11

我有几个对话框。只有一个或两个应该是透明的。所以我不能使用默认的CSS元素。 – Reinard 2014-08-31 09:47:45

查看我答案的第二部分。 – jme11 2014-08-31 09:49:00

第一部分工作完美。其次不是，但可能是我做错了什么。 – Reinard 2014-08-31 09:52:57

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>

来源

2016-01-11 03:25:54

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

回答

相关问题