テキストに黒いオーバーレイを表示しない

Question

テキストを含むdivに透明なオーバーレイを作成しようとしています。これは、ボタンを介してトリガされたときにオンまたはオフにする必要があります。通常、div内に絶対配置と幅/高さのdivを作成し、不透明度またはアニメーション（Black transparent overlay on image）を使用して不透明度を変更します。

しかし、divのテキストを選択できるようにしたいと思います。

display: none 

に

display: block 

からオーバーレイを変更すると、フェージングアニメーションを中断します。どのように私はブロックからnoneにフェードするので、私は私の下敷きのdivを再使用することができますか？

Answer 1

あなたはjQueryのを使用できる場合、これはあるかもしれませんあなたが探しているもの：

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

説明：$(".overlay").fadeIn(1000);が完了した後に、その後、display: block CSSがでてくるこのことができます

願っています！

Answer 2

あなたの質問に記載されているように不透明度の道を下って、ちょうどpointer-events: none;とpointer-events: all;を追加することができます。 pointer-eventsプロパティはブラウザに、その要素がマウスとタッチのやりとりにどのように反応するかを指示します。要素を「なし」に設定すると、その要素はそこに存在しないように、イベントを通過させます。さらに詳しい情報：https://css-tricks.com/almanac/properties/p/pointer-events/

ブラウザのサポートがまともである（すなわち< 10が、ポリフィルは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>