Question

我正在尝试在包含文本的div上创建透明叠加层。它应该通过按钮触发时打开和关闭动画。通常，您可以使用绝对定位和全宽/高度在div内创建div，使用简易或动画（Black transparent overlay on image）更改不透明度。

但我希望能够在div中选择文本。从

更改叠加层

display: block

到

display: 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;。指针事件属性告诉浏览器该元素应该如何响应鼠标和触摸交互，如果你将它设置为＆＃34; none＆＃34;它只是让事件通过，就像元素甚至不存在一样。更多信息：https://css-tricks.com/almanac/properties/p/pointer-events/

浏览器支持很不错（除了＆lt; 10，但github上的某个地方有一个polyfill）http://caniuse.com/#search=pointer-events

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

淡化文本上的黑色叠加层

2 个答案: