Cannot apply effect in my Modal window

Question

I have created a bell notification icon clicking on which a modal window opens. I want to fade the modal window in and out through CSS. I've done that coding but the modal window is not fading in but its fading out properly. Here is my code..

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>

Where is the problem? I can't find. Also you'll see the modal window is not functioning properly. Clicking anywhere is disappearing the modal window. But that I'll make later. First I want to know why its not fading in??

Answer 1

Try to use CSS animations instead of property transitions. See this: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

Answer 2

I've found a solution of this without changing any css..

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

I don't know why this one worked and not the earlier one. But probably I think the browser takes some time (in ms) to render the content when display: block is set. And before complete rendering of content, the fadeIn animation is already started. This might have interfered with the animation and disabling it. I don't know I'm right or wrong?

Delaying the line which sets the opacity to '1' by a few ms is now working.

Now Run the updated code below and see it works -

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>