Usando jQuery para criar sobreposição, mas o conteúdo herda a opacidade do CSS

Question

Eu criei uma espécie de sobreposição modal e, em seguida, um conteúdo com a sobreposição. A sobreposição modal tem um conjunto de opacidade e funciona, mas o conteúdo da sobreposição também tem opacidade. Acho que está herdando ... eu realmente não quero Para aplicar uma nova classe ao conteúdo, existe uma maneira de dizer apenas se aplicar a

Aqui está meu CSS

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

e meu jQuery para criar o modelo e o conteúdo

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

Answer 1

A propriedade "opacidade" do CSS não está sendo herdada, embora possa parecer assim.

Como o conteúdo é dentro de A sobreposição da opacidade, na melhor das hipóteses, será a dos pais (sobreposição). Portanto, se o pai tiver uma opacidade de 0,5, visualmente, todos os seus filhos só poderão alcançar essa opacidade (não mais alta).

Para evitar isso, os elementos devem ser separados no HTML. Eu sei que é uma dor e acho que o CSS realmente deve ter alguma maneira de lidar com isso, mas infelizmente não.

Outro método que funcionaria com elementos aninhados é esquecer a propriedade Opacity e, em vez disso, usar uma imagem PNG com transparência alfa e defini -la como plano de fundo para a sobreposição.

Answer 2

Se estou lendo sua pergunta corretamente, isso é apenas uma conseqüência da maneira como a opacidade funciona agora: os elementos filhos herdam a opacidade como um intervalo, de modo que o valor de seus A opacidade é normalizada contra os pais, semelhante à altura/largura pode funcionar. Portanto, um valor de "1" na criança realmente significa "100% de 0,8". Também não há como ter 110% no caso de você estar mentalmente para lá.

As soluções para isso não são bonitas, mas as maneiras mais práticas são lidar com isso com um irmão de fundo (então a opacidade é a preocupação de algo completamente diferente) - não é ótimo para a semântica, mas eficaz - ou a segunda maneira é usar PNGs Para fazer sua transparência, mas isso está sujeito a problemas legado, ou seja.

Muitas boas discussões sobre isso em torno da rede, eu mantenho Este Marcado.

Answer 3

O seguinte JS, que foi escrito no jQuery 1.3:

$(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);

        });
    });

e a seguinte marca:

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

Dessa forma, seu conteúdo não terá a mesma opacidade que sua sobreposição modal e assentos bem no meio do que todos olhamos para as vezes demais !! :)

Answer 4

Seu conteúdo não deve fazer parte da sobreposição. A sobreposição está lá para evitar o acesso ao conteúdo normal, não para abrigar o conteúdo modal.

Em vez de anexar seu conteúdo à Overlay Div, anexá -lo a seus pais e estilizá -lo para que ele apareça onde você gostaria.

Além disso, a interface do usuário do jQuery tem um Diálogo widget que pode ser usado para modais.

Answer 5

Boa postagem. Eu tenho pensado por isso há muito tempo para subir a funcionalidade do Mootls Sexy Alert Box. A postagem de Ali está funcionando perfeitamente, mas eu tenho que adicionar a propriedade do índice Z para fazer minha div aparecer sobre a sobreposição. Apenas um zindex mais baixo para o Lay Over Lay e um Higner Zindex para minha div mobilizou. obrigada.