3

我创建了一种模态叠加层，然后创建了一个带有叠加层的内容..模态叠加层设置了不透明度并且它可以工作，但是叠加层的内容也有不透明度..我认为它继承了它......我真的不想要将新类应用于内容，有没有办法说只适用于

这是我的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);
4

5 回答 5

8

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

由于内容在覆盖范围内，因此不透明度充其量是父级（覆盖）的不透明度。因此，如果父级的不透明度为 0.5，那么在视觉上，它的所有子级都只能达到该不透明度（不会更高）。

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

另一种适用于嵌套元素的方法是忘记 opacity 属性，而是使用具有 alpha 透明度的 PNG 图像并将其设置为叠加层的背景。

于 2009-06-08T16:15:06.143 回答
2

如果我没看错你的问题，这只是 opacity 现在工作方式的结果：子元素继承 opacity 作为一个范围，因此它们的opacity 值针对父元素进行标准化，类似于 height/width 的工作方式。因此，孩子的“1”值实际上意味着“0.8 的 100%”。万一你精神错乱，也没有办法达到 110%。

对此的解决方案并不漂亮，但最实用的方法是用背景兄弟处理这个问题（所以不透明度完全是其他事情的关注点）——对语义来说不是很好，但很有效——或者第二种方法是使用 PNG做你的透明度，但这会受到遗留 IE 问题的影响。

网上有很多关于这个的很好的讨论，我把这个收藏了。

于 2009-06-08T16:16:50.043 回答
2

以下是在 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);

        });
    });

和以下标记：

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

这样，您的内容将不会具有与模态叠加层相同的不透明度，并且可以很好地位于我们有时看得太多了的中间！:)

于 2009-06-08T21:36:54.213 回答
0

你的内容不应该是覆盖的一部分。覆盖是为了防止访问正常内容，而不是容纳模态内容。

不要将您的内容附加到覆盖 div，而是将其附加到它的父级并设置样式，以便它出现在您想要的位置。

此外，jQuery UI 有一个Dialog小部件，可用于模式。

于 2009-06-08T16:22:44.410 回答
0

不错的帖子。长期以来，我一直在考虑超越 mootls 性感警报框的功能。Ali 的帖子运行良好，但随后我必须添加 z index 属性以使我的 div 出现在叠加层上。只是一个较低的 zindex 用于覆盖和一个更高的 zindex 为我的 div 制定了。谢谢你。

于 2009-10-24T12:26:49.227 回答