Question

摘要

我希望显示一个jQuery UI对话框，其不透明度大约为.75，我能够执行。

但是，不透明度也会传递给.ui-dialog-content类和整个对话框。

我想独立于对话框核心及其内容来处理对话框的不透明度，所以无论是标题栏还是内容本身。

对话框应显示在包含照片的背景上，我想让用户通过.75的不透明度进行部分查看。但是，对话框内容中的文本变得难以阅读，因为它也会获得0.75的不透明度，使文本就像是灰色而不是黑色作为默认颜色。

搜索已经执行

我已经在多个关键字下进行了研究，试图找出如何实现所需的结果，每次我都找到有关模态对话框叠加层的信息，这不代表我的对话框。

以下是迄今为止发现的结果：

jQuery: Set modal dialog overlay color
Darker background in Jquery UI dialog
jquery-ui-dialog.css (source)
jquery blankout / grayout the page where dialog box is showing
How to change background color of jQuery UI Dialog?

至于更改对话框的背景颜色，我能够这样做。另外，在使用透明背景时，我几乎可以完成我想要的任务。但是，由于我在网站背景上的图像，有些短语恰好出现在难以阅读的地方。然后，我希望不要有透明的背景，而是一个透明的白色背景，不透明度给我的东西。但是当设置为0.75时，.dialog甚至.ui-dialog类的不透明度，一切都是灰色的，这正是我不想实现的。

CSS

.dialog {
    box-shadow: 0 4px 4px 0 #888;
}

.dialog .ui-dialog-titlebar {
    background: rgb(74, 159, 63);
    color: white;
}

.ui-dialog {
    border: 1px solid rgb(74, 159, 63);
    border-bottom: 0px;
    color: #333;
    font: 18px/120% Arial, Helvetica, sans-serif;
    opacity: .75;
}

.ui-dialog-content {
    opacity: 100;
}

的Javascript

$(document).ready(function() {
var corporationKey = 0;
var servicesKey = 1;
var fadeEffectDuration = 500;
var dialogWidth = 1000;

var dialogs = new Array("#CorporationDialog", "#ServicesDialog");

$(dialogs[corporationKey]).dialog({
    autoOpen: false,
    closeOnEscape: true,
    dialogClass: 'dialog',
    hide: {
        effect: "fade",
        duration: fadeEffectDuration
    },
    resizable: true,
    show: {
        effect: "fade",
        duration: fadeEffectDuration
    },
    width: dialogWidth
});

$(dialogs[servicesKey]).dialog({
    autoOpen: false,
    closeOnEscape: true,
    dialogClass: 'dialog',
    hide: {
        effect: "fade",
        duration: fadeEffectDuration
    },
    resizable: true,
    show: {
        effect: "fade",
        duration: fadeEffectDuration
    },
    width: dialogWidth
});

// Opens the Enterprise dialog
$("#CorporationMenu").click(function() { 
    closePreviouslyOpenedDialogs(dialogs);
    openDialog(dialogs[corporationKey]);
    return false; 
});
// Opens the Services dialog
$("#ServicesMenu").click(function() {
    closePreviouslyOpenedDialogs(dialogs);
    openDialog(dialogs[servicesKey]);
    return false;
});

$("#accordion").accordion({ active: false, collapsible: true, heightStyle: "content" });
});

function closePreviouslyOpenedDialogs(dialogs) {
for (var i=0;i<dialogs.length;i++) {
    closeDialog(dialogs[i]);
}
}

function closeDialog(key) {
    $(key).dialog( "close" );
}

function openDialog(key) {
    $(key).dialog( "open" );
}

HTML 示例

<div id="CorporationDialog" title="Entreprise">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

问题

一旦对话框的不透明度被设置为让我们说.75？

谢谢你们！

解决方案修改

根据Richard A.回答，找到的解决方案如下：

的Photoshop

使用Photoshop或任何等效工具
在Photoshop中，添加一个新图层并使用Pain Bucket将其填充为白色
向下滑动位于图层正上方的不透明度设置，您也可以使用填充
保存图像与Web和设备
在此对话框中，选择PNG-24而不是默认GIF
确保选中透明度复选框并保存。

CSS

.ui-dialog {
    background-image: url('path/to/my/dialog-background-translucent.png') !important;
    background-repeat: repeat;
    background: transparent;
    /* Other settings here*/
}

请注意用于background-image属性的!important关键字。这就是让一切变得完全的原因！

Etvoilà！

Answer 1

不幸的是，这是功能而不是错误。 CSS继承意味着放置在父项上的任何不透明度属性也适用于其中的任何元素。您可以通过使用position: absolute和z-index实验将对话框内容放在单独的DIV中来做一些聪明的事情，但对于您想要实现的目标感觉需要付出很多努力。

更简单的是，您可以将对话框/标题的background-image定义为半透明的PNG图像，并将对话框的opacity保留在原来的位置。它不是一个仅限CSS的解决方案，这正是您所寻找的。

希望这有助于澄清您的问题！

Answer 2

实际上我发现这是有用的：首先声明透明度然后是半透明图像

.ui-dialog {
    background: transparent !important;
    background-image: url('path/to/my/dialog-background-translucent.png') !important;
    background-repeat: repeat;
    /* Other settings here */
}

这将产生半透明的背景。

感谢指点。

jQuery UI对话框 - 仅使用背景不透明度而不使字体变灰？

2 个答案: