Superposition de fondu noir sur le texte

Question

J'essaie de créer une superposition transparente sur un texte contenant div. Il devrait être activé et désactivé lorsqu'il est déclenché via un bouton. Normalement, vous pouvez simplement créer un div à l'intérieur de ce div avec le positionnement absolu et la largeur/hauteur complète, en changeant l'opacité en utilisant une facilité ou une animation (Black transparent overlay on image).

Mais je veux être en mesure de sélectionner le texte dans la div. Modification de la superposition de

display: block 

à

display: none 

briserai l'animation à la décoloration. Comment puis-je passer de bloc à aucun, donc je peux réutiliser mon div sous-jacent?

Answer 1

Si vous pouvez utiliser jQuery, cela pourrait être ce que vous cherchez:

$(document).ready(function() { 
 
    $("#popupbtn").click(function() { 
 
    $(".overlay").fadeIn(1000); 
 
    $(".overlay").css("display","block"); 
 
    }); 
 
    $("#close").click(function() { 
 
    $(".overlay").fadeOut(1000); 
 
    //$(".overlay").css("display","none"); 
 
    }); 
 
}); 
 

body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: RGBa(0,0,0,0.5); 
 
    display: none; 
 
} 
 
.popup { 
 
    background: green; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: inherit; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin: -100px 0 0 -100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="popupbtn">click me</button> 
 
<div class="overlay"> 
 
    <div class="popup"> 
 
    <p>popup text</p> 
 
    <button id="close">close</button> 
 
    </div> 
 
</div>

Explication:. Après $(".overlay").fadeIn(1000); est terminé, le display: block CSS viendra

Hope this helps!

Answer 2

Vous pouvez descendre la route d'opacité comme vous l'avez mentionné dans votre question et il suffit d'ajouter pointer-events: none; et pointer-events: all;. La propriété pointer-events indique au navigateur comment cet élément doit réagir aux interactions souris et tactile, si vous le définissez sur «none», il laisse simplement passer les événements, comme si l'élément n'était même pas là. Plus d'infos: https://css-tricks.com/almanac/properties/p/pointer-events/

Le soutien du navigateur est correcte (sauf à-dire < 10, mais il y a un polyfill quelque part sur github) http://caniuse.com/#search=pointer-events

$('button').on('click', function(e) { 
 
\t e.preventDefault(); 
 
    $('.container').toggleClass('overlay-open'); 
 
})

.container { 
 
    position: relative; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    top: 10px; 
 
    right: 10px; 
 
    bottom: 10px; 
 
    left: 10px; 
 
    background-color: black; 
 
    opacity: 0; 
 
    transition: opacity 250ms ease-in-out; 
 
    pointer-events: none; 
 
} 
 

 
.overlay-open .overlay { 
 
    opacity: 1; 
 
    pointer-events: all; 
 
} 
 

 
button { 
 
    margin-bottom: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Toggle Overlay</button> 
 
<div class="container"> 
 
    <div class="back"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi ipsam, illum sed dolorum quos modi, quibusdam cum tempora molestias laboriosam voluptas. Fuga corporis earum modi, aut nisi in molestias explicabo voluptatem iure distinctio tempora, iusto doloremque. Inventore culpa eligendi dolore. Expedita, officia, assumenda. Id magnam molestias saepe, cupiditate, architecto autem. 
 
    </div> 
 
    <div class="overlay"></div> 
 
</div>