Fade schwarze Überlagerung auf Text

Question

Ich versuche, eine transparente Überlagerung auf einem Div mit Text zu erstellen. Es sollte ein- und ausgeschaltet werden, wenn es über eine Schaltfläche ausgelöst wird. Normalerweise können Sie einfach ein div in diesem div mit absoluter Positionierung und voller Breite/Höhe erstellen, indem Sie die Deckkraft mit Hilfe einer einfachen oder animierten Animation ändern (Black transparent overlay on image).

Aber ich möchte den Text im div auswählen können. Ändern des Overlay von

display: block 

zu

display: none 

Wird die Fading-Animation brechen. Wie verblasse ich von Block zu None, damit ich mein darunterliegendes Div wiederverwenden kann?

Answer 1

Wenn Sie jQuery verwenden können, könnte dies sein was du suchst:

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

. Erläuterung: nach $(".overlay").fadeIn(1000); abgeschlossen ist, dann wird die display: block CSS kommen in

hoffe, das hilft!

Answer 2

Sie können die Opazität Straße gehen, wie Sie in Ihrer Frage erwähnt und nur pointer-events: none; und pointer-events: all; hinzufügen. Die Eigenschaft pointer-events teilt dem Browser mit, wie dieses Element auf Maus- und Touch-Interaktionen reagieren soll. Wenn Sie es auf "none" setzen, lassen Sie einfach die Ereignisse durch, so wie das Element nicht einmal dort war. Weitere Informationen: https://css-tricks.com/almanac/properties/p/pointer-events/

Der Browser-Unterstützung anständig ist (außer dh < 10, aber es gibt eine polyfill irgendwo auf 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>