Javascript 使用jquery创建覆盖，但内容继承CSS不透明度

我创建了一种模式覆盖，然后用覆盖创建了一个内容。。模式覆盖设置了不透明度，但覆盖内容也有不透明度。。我认为它继承了它。。。我真的不想将一个新类应用到内容中，有没有一种方法可以说只应用于

这是我的css

.modal-overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #000000;
    display: none;
}

和我的jquery来创建模型和内容

var overlayLayer = $("<div id='office-location'></div>").addClass('modal-overlay'); //THIS HAS THE OVERLAY CLASS OF CSS - SO IT SHOULD HAVE A OPACITY SET AND IT DOES

$('body').append(overlayLayer);

$('<div id="content-for-overlay" style="background-color: white;"></div>').appendTo(overlayLayer);  /// CONTENT IS ALSO HAS OPACITY BUT ITS WRONG

this.render({ to: "content-for-overlay", partial: "office-location-modal" });// THIS Sends a content from one file to my ID content-for-overlay...  Its standard html

$("body").css("overflow", "hidden");
$('#office-location').css("opacity", 0.8).fadeIn(150);
$('#content-for-overlay').css("opacity", 1);

var overlayLayer=$（“”）。addClass（'modal-overlay'）//这有CSS的OVERLAY类-所以它应该有一个不透明度集，它确实有
$（'body'）.append（overlylayer）；
$（''）.appendTo（overlylayer）；//内容也有不透明度，但它是错误的
this.render（{to:“覆盖内容”，partial:“办公位置模式”}）；//这会将一个文件中的内容发送到我的ID内容以进行覆盖。。。它的标准html
$（“body”）.css（“溢出”、“隐藏”）；
$（“#办公地点”）.css（“不透明度”，0.8）.fadeIn（150）；
$（“#覆盖内容”）.css（“不透明度”，1）；

CSS“不透明”属性没有被继承，尽管看起来可能是这样

由于内容位于覆盖层内，因此不透明度最多为父层（覆盖层）的不透明度。因此，如果父对象的不透明度为0.5，则在视觉上，其所有子对象只能达到该不透明度（不高于该值）

为了避免这种情况，HTML中的元素必须是分开的。我知道这很痛苦，我认为CSS真的应该有一些方法来处理这个问题，但不幸的是，它没有

---

另一种处理嵌套元素的方法是忽略“不透明度”属性，而是使用具有alpha透明度的PNG图像，并将其设置为覆盖的背景

如果我没有看错你的问题，这只是不透明度目前工作方式的结果：子元素继承不透明度作为一个范围，因此其不透明度的值相对于父元素进行标准化，类似于高度/宽度的工作方式。因此，子对象上的值“1”实际上意味着“0.8的100%”。如果你有精神病，也不可能有110%

解决这个问题的方法并不漂亮，但最实用的方法是使用后台同级处理（因此不透明性完全是另一个问题的关注点）——对语义来说不是很好，但很有效——或者第二种方法是使用PNG来实现透明性，但这会受到遗留IE问题的影响

---

关于这一点，我在网上有很多很好的讨论。你的内容不应该是覆盖的一部分。覆盖是为了防止访问正常内容，而不是存放模式内容

与其将内容附加到覆盖div，不如将其附加到其父级并设置样式，使其显示在您想要的位置

---

另外，jQuery UI有一个小部件，可用于modals。

以下是在jQuery 1.3上编写的js：

$(document).ready(function() {
        $(document.body).prepend('<div class="modalOverLay"></div>');
        $('.modalOverLay').css({ opacity: 0.5, width: '100%', height: '100%' });
        $('#trigger').click(function() {
            $('.modalOverLay').fadeIn('slow');
            $('.contentBox').css({
                position: 'absolute',
                left: ($(document).width() - $('.contentBox').width()) / 2,
                top: ($(document).height() - $('.contentBox').height()) / 2
            });
            $('.contentBox').fadeIn(500);

        });
    });

$（文档）.ready（函数（）{
$（document.body）.prepend（“”）；
$（'.modalOverLay'）.css（{不透明度：0.5，宽度：'100%，高度：'100%}）；
$（“#触发器”）。单击（函数（）{
$（'modalOverLay'）.fadeIn（'slow'）；
$（'.contentBox'）.css({
位置：'绝对'，
左：（$（document.width（）-$（'.contentBox'）.width（））/2，
顶部：（$（文档）.height（）-$（'.contentBox'）.height（））/2
});
$（'.contentBox'）.fadeIn（500）；
});
});

加幅如下：

<a href="#" id="trigger">Trigger Modal pop up</a>
<div class="contentBox">
    <p>I am on overlay but don't have the same opacity</p>
</div>

我在叠加上，但不具有相同的不透明度

---

这样，你的内容不会像你的模态叠加一样的不透明度，并且在我们所看到的部分中间很好地占优，有时太多了！p> 不错的帖子。我一直在想这个很长一段时间，超越了mootls性感警报框的功能。Ali的帖子运行得很好，但是我必须添加z index属性，以使我的div显示在覆盖图上。只有一个较低的zindex用于覆盖，一个较高的zindex用于我的div。谢谢。

我想你比我更清楚地解释了不透明度的概念+1.