Modal animation

Cool modal animation using Bill Murray

by Lio Fleishman

HTML

<section class="section-modal">
  <div class="profile"><img src="http://www.fillmurray.com/130/130" />
    <div class="text">
      <div class="name">Bill Murray</div>
      <div class="meta">Click me!</div>
    </div>
  </div>
  <div class="overlay">
    <div class="modal">
      <div class="title">You clicked a Murray!</div>
      <div class="body">
        <div style="background-image: url(http://www.fillmurray.com/180/180)" class="img"></div>
        <div class="text">
          <p>Bill Murray loves you, and sends his most sincere regards.</p>
          <p>He also asks that you simply keep on hacking.</p>
        </div>
      </div>
    </div>
  </div>
</section>

SCSS

.section-modal {
  position: relative;
  overflow: hidden;
  width: 500px;
  height: 300px;
  .profile {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.1);
    background: white;
    padding: 15px 30px;
    border-radius: 4px;
    box-shadow: 0px 23px 30px -20px rgba(0, 0, 0, 0.4);
    transition: all 200ms ease-in-out;
    &:hover {
      cursor: pointer;
      transform: translateY(-4px);
      box-shadow: 0px 27px 30px -20px rgba(0, 0, 0, 0.4);
    }
    .name {
      font-size: 24px;
      margin-bottom: 8px;
    }
    .meta {
      color: rgba(0, 0, 0, 0.4);
    }
    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-right: 20px;
    }
  }
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
    .modal {
      width: 450px;
      box-shadow: 0px 23px 30px -20px rgba(0, 0, 0, 0.4);
      .title {
        background: #0097A7;
        color: white;
        border-radius: 4px 4px 0px 0px;
        text-align: center;
        line-height: 48px;
        font-weight: 700;
      }
      .body {
        background: white;
        border-radius: 0px 0px 4px 4px;
        line-height: 20px;
        display: flex;
        align-items: stretch;
        .text {
          padding: 30px;
          p {
            margin-bottom: 20px;
          }
        }
        .img {
          height: 180px;
          width: 140px;
          border-bottom-left-radius: 4px;
          flex-shrink: 0;
          background: {
            size: cover;
            position: center;
          }
          ;
        }
      }
    }
    &.is-active {
      display: flex;
      animation: overlayAnim 5s ease-in-out forwards;
      .modal {
        animation: modalAnim 5s ease-in-out forwards;
      }
    }
  }
}

@keyframes overlayAnim {
  0%,
  100% {
    background-color:...

JavaScript

var sectionModal = document.getElementsByClassName('section-modal');
var profile = document.getElementsByClassName('profile');
var overlay = document.getElementsByClassName('overlay');

var myFunction = function() {
		console.log(overlay);
    overlay[0].classList.toggle("is-active");
    setTimeout(function(){
    overlay[0].classList.remove('is-active');
  }, 5000);
};

for (var i = 0; i < sectionModal.length; i++) {
    sectionModal[i].addEventListener('click', myFunction, false);
}