无法在我的模式中应用效果 window

Question

我创建了一个铃铛通知图标，单击它会打开模式 window。我想通过 CSS 淡入淡出模态 window。我已经完成了编码，但是模态 window 没有淡入，而是正确地淡出。这是我的代码..

function showModal()
{
 document.getElementsByClassName('modalOverlay')[0].style.display = "block";
 document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
}
function hideModal()
{
 document.getElementsByClassName('modalOverlay')[0].style.opacity = 0;
 setTimeout(function(){document.getElementsByClassName('modalOverlay')[0].style.display = "none"}, 300);
}

#bellNotification
{
 line-height: 100%;
 position: fixed;
 top: 0;
 right: 10%;
 font-size: 40px;
 color: gold;
}
#bellNotification:hover
{
 cursor: pointer;
}
#bellNotification:hover #subscribeTooltip
{
 visibility: visible;
 opacity: 1;
 margin-top: 60px;
}
#subscribeTooltip
{
 visibility: hidden;
 position: absolute;
 padding: 7px 15px 5px 15px;
 background-color: #fff;
 color: #1a1a1a;
 font-size: 17px;
 font-family: 'Palanquin';
 margin-top: 70px;
 opacity: 0;
 transform: translateX(-50%);
 margin-left: 20px;
 transition: all 0.2s ease-in;
}
#subscribeTooltip:hover
{
 cursor: default;
 opacity: 0 !important;
 margin-top: 70px !important;
 visibility: hidden !important;
}
#triangleUp
{
 position: relative;
 width: 0;
 height: 0;
 border-bottom: 10px solid white;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 margin: 0 auto;
 margin-top: -17px;
}
.modalOverlay
{
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 9999;
 background-color: rgba(0,0,0,0.8);
 width: 100%;
 height: 100%;
 color: black;
 opacity: 0;
 transition: opacity 0.3s ease-in;
}
.modalOverlay #window
{
 width: 50%;
 min-height: 200px;
 background-color: white;
 font-family: 'Titillium';
 box-shadow: 0 0 10px #000;
 position: relative;
 top: 50%;
 margin: 0 auto;
 box-sizing: border-box;
 padding: 20px 30px;
 transform: translateY(-50%);
}
.modalOverlay input
{
 color: #4d4d4d;
 font-family: 'Palanquin';
}

<div id="bellNotification" onclick="showModal();">Bell-icon
  <div id="subscribeTooltip"><div id="triangleUp"></div>Subscribe&nbsp;for&nbsp;our&nbsp;newsletter</div>
  <i class="fa fa-bell"></i>
</div>
 
<div class="modalOverlay" onclick="hideModal()">
 <div id="window">
  Lorem Ipsum dolor sit amet.<br />
  <input type="email" placeholder="Enter your email to subscribe for our newsletter" /><input type="button" value="Proceed" />
 </div>
</div>

问题出在哪里？我找不到。您还会看到模式 window 无法正常运行。单击任意位置都会消失模式 window。但我稍后会做。首先我想知道为什么它不褪色？？

Answer 1

尝试使用 CSS 动画而不是属性过渡。看到这个：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

Answer 2

我找到了这个问题的解决方案，无需更改任何 css..

function showModal() {
  document.getElementsByClassName('modalOverlay')[0].style.display = "block";
  setTimeout(function() {
    document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
  }, 17);
}

我不知道为什么这个有效而不是早期的。但我可能认为浏览器在设置 display: block 时需要一些时间（以毫秒为单位）来呈现内容。在内容渲染完成之前，淡入动画已经开始。这可能会干扰动画并禁用它。不知道我说的对还是错？

将不透明度设置为“1”的行延迟几毫秒现在可以正常工作。

现在运行下面的更新代码，看看它是否有效 -

function showModal() {
  document.getElementsByClassName('modalOverlay')[0].style.display = "block";
  setTimeout(function() {
    document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
  }, 17);
}

function hideModal() {
  document.getElementsByClassName('modalOverlay')[0].style.opacity = 0;
  setTimeout(function() {
    document.getElementsByClassName('modalOverlay')[0].style.display = "none"
  }, 300);
}

#bellNotification {
  line-height: 100%;
  position: fixed;
  top: 0;
  right: 10%;
  font-size: 40px;
  color: gold;
}
#bellNotification:hover {
  cursor: pointer;
}
#bellNotification:hover #subscribeTooltip {
  visibility: visible;
  opacity: 1;
  margin-top: 60px;
}
#subscribeTooltip {
  visibility: hidden;
  position: absolute;
  padding: 7px 15px 5px 15px;
  background-color: #fff;
  color: #1a1a1a;
  font-size: 17px;
  margin-top: 70px;
  opacity: 0;
  transform: translateX(-50%);
  margin-left: 20px;
  transition: all 0.2s ease-in;
}
#subscribeTooltip:hover {
  cursor: default;
  opacity: 0 !important;
  margin-top: 70px !important;
  visibility: hidden !important;
}
#triangleUp {
  position: relative;
  width: 0;
  height: 0;
  border-bottom: 10px solid white;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  margin: 0 auto;
  margin-top: -17px;
}
.modalOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  color: black;
  opacity: 0;
  transition: opacity 0.3s ease-in;
}
.modalOverlay #window {
  width: 50%;
  min-height: 200px;
  background-color: white;
  box-shadow: 0 0 10px #000;
  position: relative;
  top: 50%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 20px 30px;
  transform: translateY(-50%);
}
.modalOverlay input {
  color: #4d4d4d;
}

<div id="bellNotification" onclick="showModal();">Bell-icon
  <div id="subscribeTooltip">
    <div id="triangleUp"></div>Subscribe&nbsp;for&nbsp;our&nbsp;newsletter</div>
  <i class="fa fa-bell"></i>
</div>

<div class="modalOverlay" onclick="hideModal()">
  <div id="window">
    Lorem Ipsum dolor sit amet.
    <br />
    <input type="email" placeholder="Enter your email to subscribe for our newsletter" />
    <input type="button" value="Proceed" />
  </div>
</div>

无法在我的模式中应用效果 window

Cannot apply effect in my Modal window

css-transitions

opacity

modal-window