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

Posted 2023-03-06

【中文标题】jQuery UI 对话框 - 仅使用背景不透明度而不使字体变灰？

【英文标题】：jQuery UI Dialog - Work with the background only opacity without graying the fonts?

【发布时间】：2013-01-28 19:09:48

【问题描述】：

总结

我希望显示一个不透明度约为 0.75 的 jQuery UI 对话框，我可以执行此操作。

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

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

对话框应显示在包含照片的背景上，我希望允许用户通过 0.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>

问题

一旦对话框的不透明度设置为 0.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 关键字。这就是让一切变得不同的原因！

等等！

【参考方案1】：

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

更简单的是，您可以将对话框/标题的 background-image 定义为半透明的 PNG 图像，并将对话框的 opacity 保留在原处。不过，这不是一个纯 CSS 的解决方案，而这正是您所寻找的。​​p>

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

【讨论】：

我想知道如何实现我的目标，而 CSS 并不是唯一的选择。我只是认为应该有一种方法来实现它，因为我还不是使用 jQuery UI 的专家。所以也许其他人以前也能取得这样的成绩。感谢您的 PNG 解决方案 (+1)，我将调查此事，看看我能用它做什么，并让您知道。

你的想法很好用！谢谢！请查看我的编辑以查看整个解决方案。 =)

【参考方案2】：

其实我发现这是可行的：先声明透明度，然后声明半透明图像

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

这将给出一个半透明的背景。

谢谢你的指点。