Primer - Modals

In this example below you will see how to do a Primer - Modals with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by acordova, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright acordova ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Primer - Modals</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/91494/primer.min.css'>
<link rel='stylesheet prefetch' href='css/https___s3_us_west_2_amaz.css'>
<link rel='stylesheet prefetch' href='css/https___s3_us_west_2_amaz.css'>
<link rel='stylesheet prefetch' href='css/https___s3_us_west_2_amaz.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="modal is-hidden">
  <div class="modal-body">
    <h3 class="modal-headline text-uppercase">This is a modal</h3>
    <p class="modal-copy">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse explicabo blanditiis magni ea, assumenda accusamus fuga animi consequuntur voluptatibus architecto ut praesentium perferendis sed voluptatem saepe excepturi laboriosam commodi.</p>
    <button type="button" class="btn btn-primary btn-small-block">Accept</button>
    <button type="button" class="btn btn-small-block" data-action="close">Cancel</button>
  </div>
</div>

<div class="container block-center" role="main">
  <div class="grid row">
    <div class="column-12">
      <button role="button" class="btn btn-primary" data-action="launch">Launch Modal</button>
    </div>
  </div>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/acordova/primer-modals-dowbjr */
/*
// Modals
.modal {
  position: absolute;
  z-index: 1001;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba($true-black, 0.5);
  .modal-body {
    position: relative;
    top: 80px;
    margin: 10px auto;
    padding: 30px;
    width: 100%;
    background-color: $true-white;
    @include breakpoint(medium) {
      margin-top: 0;
      margin-bottom: 0;
      width: 400px;
    }
  }
  .modal-headline {
    margin-bottom: 10px;
  }
  .modal-copy {
    margin-bottom: 20px;
  }
}*/


/*Downloaded from https://www.codeseek.co/acordova/primer-modals-dowbjr */
// FPO
var launcher = document.querySelector('.btn[data-action="launch"]'),
    close = document.querySelector('.btn[data-action="close"]');

launcher.addEventListener('click', launchModal);
close.addEventListener('click', closeModal);

function launchModal() {
  var modalContainer = document.querySelector('.modal'),
      modal = document.querySelector('.modal-body');

  if (modalContainer.classList.contains('is-hidden')) {
    modalContainer.classList.remove('is-hidden');
    modal.classList.add('is-zooming-in');
    modal.addEventListener('webkitAnimationEnd', function() {
      this.classList.remove('is-zooming-in');
    });
  }
}

function closeModal() {
  var modalContainer = document.querySelector('.modal'),
      modal = document.querySelector('.modal-body');
  
  if (!modalContainer.classList.contains('is-hidden')) {
    modal.classList.add('is-zooming-out');
    modal.addEventListener('webkitAnimationEnd', function close() {
      this.classList.remove('is-zooming-out');
      modalContainer.classList.add('is-hidden');
      this.removeEventListener('webkitAnimationEnd', close);
    });
  }
}

Comments