Modal Window

In this example below you will see how to do a Modal Window with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by praliedutzel, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright praliedutzel ©
  • HTML
  • CSS
  • JavaScript
    <header class="header">
  <h1 class="header__title">Modal Window</h1>
<!--   <a href="#" target="_blank">Read the Article</a> -->
</header>

<div class="container">
  <button class="modal-trigger">Open Modal</button>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, impedit deleniti officiis, tenetur obcaecati dicta vero perferendis minus eveniet laudantium corporis aut repudiandae, laborum, placeat. Aperiam ea quos beatae. Tempore.</p>
  <p>Eum rerum quos dolores saepe maiores eius, debitis fuga incidunt, assumenda tenetur maxime. Obcaecati, eius? Quidem autem, ex temporibus sed necessitatibus corporis. Amet, eligendi. Minus eaque aperiam doloremque animi blanditiis?</p>
  <p>Dignissimos ipsum, voluptatibus! Accusantium voluptate quas natus dolorem aliquid similique accusamus asperiores, sit atque laboriosam ipsam laudantium repudiandae maxime in vero, quia. Deleniti, ea. Numquam minima odio hic consequuntur voluptatibus!</p>
  <p>Nihil sed magni sequi facilis nesciunt dolorum illum libero minus doloremque nostrum laborum assumenda quasi, ullam repellat voluptatum esse, inventore impedit aliquam officiis veniam alias sint veritatis quibusdam. Quis, iure!</p>
  <p>A quaerat vitae ea, adipisci animi repellendus, impedit dignissimos eos voluptatum, nulla sapiente veritatis pariatur nemo sed fugit libero praesentium autem enim. Ut unde commodi neque laboriosam, dolor placeat quibusdam?</p>
  <p>Ad recusandae quisquam, quam aperiam nihil, fugit eius, cumque nesciunt repellat assumenda facere saepe natus eveniet excepturi vel ipsum accusamus ea ducimus facilis numquam. Tenetur voluptatum, adipisci natus quasi molestiae.</p>
  <p>Quidem dolores sint sit perspiciatis iure tempore blanditiis, repellat, alias ratione excepturi eius beatae, laudantium nesciunt unde quos laborum iusto sunt, ad atque eveniet debitis voluptas libero? Asperiores, mollitia consequatur.</p>
  <p>Quia aut tempore quam commodi sit, autem ea modi eum error quae amet, ducimus pariatur, consectetur veritatis. Vitae magni illum praesentium ex veniam dignissimos esse totam, ducimus, odit aliquam odio.</p>
  <p>Maxime esse repudiandae, inventore earum sunt ratione eveniet, itaque minus iure consequuntur. Doloribus blanditiis quae sed laborum sunt voluptatibus aperiam ea laudantium, repellendus quaerat cumque iste sapiente quos, pariatur. Odio.</p>
  <p>Iure maxime similique vitae, placeat voluptates nemo amet. Animi quos eius laborum, similique expedita natus facilis aliquid sapiente. Amet error unde, et eius sed aperiam omnis accusantium soluta dolorum exercitationem.</p>
  <p>Modi quidem blanditiis atque? Fugit, velit excepturi doloremque iste explicabo nulla vel quibusdam enim aut, exercitationem magni ullam accusantium veniam qui! Exercitationem reprehenderit, in quas cumque id libero nobis ipsa.</p>
  <p>Nemo perspiciatis dolore atque harum? Dolore exercitationem doloribus quo aperiam! Animi esse, quas qui cupiditate corporis necessitatibus magni quaerat nisi consectetur repudiandae dolorem incidunt ullam temporibus fugiat, praesentium voluptatem tempora.</p>
  <p>Adipisci reprehenderit excepturi repellat sapiente necessitatibus magnam voluptates. Modi quis, ratione vel esse eligendi, sed, id, ipsam autem quos enim natus ex reprehenderit alias? Modi blanditiis, perspiciatis tempore consequuntur vero.</p>
  <p>Nisi veniam similique ipsum eius, ex incidunt neque obcaecati maiores iste quae cupiditate voluptas architecto excepturi. Corporis quisquam sint, voluptatum illo vel repellat nesciunt enim reprehenderit laudantium laboriosam, nisi aut.</p>
  <p>Quae magnam necessitatibus consectetur nemo sunt. Facilis voluptatibus amet magnam, doloremque obcaecati explicabo in aperiam maxime libero culpa! Ex cumque accusantium voluptatum porro quisquam consequuntur quaerat, eveniet, eius nesciunt sunt.</p>
  <p>At dolores est laboriosam animi veniam deleniti obcaecati eligendi, tempore eius dolore optio, eaque possimus quaerat. Est fugiat obcaecati architecto laborum consectetur culpa perferendis ratione, odit ullam adipisci expedita. Quae.</p>
  <p>Iure cum odio at. Quis suscipit illum, libero, sequi quisquam nemo corporis inventore eaque necessitatibus fugiat perspiciatis, aliquam dolores dolorem, aut molestias voluptatibus sint facere modi neque facilis a deserunt.</p>
  <p>Omnis nam qui ab architecto laborum maiores magnam expedita, accusamus, ipsam! Consequatur, aliquid qui, eligendi ex placeat fuga. Porro asperiores molestias cumque optio id nesciunt itaque, iusto. Nisi, totam. Incidunt.</p>
  <p>Ipsam, quam error deleniti, debitis veritatis perspiciatis commodi praesentium earum eos eligendi esse in tempore ad explicabo laboriosam, omnis totam eius beatae. Facilis error asperiores, dolor rerum! Doloribus, nobis, velit.</p>
  <p>Nam totam hic officia voluptatibus natus, ea perspiciatis animi, nesciunt nobis id mollitia modi expedita dolorem consectetur consequuntur itaque aliquam, labore magnam aperiam sint iusto quibusdam fugit reprehenderit. Eaque, nostrum.</p>
  
  <button class="modal-trigger">Open Modal</button>
</div>

<div class="modal">
  <div class="modal__container">
    <button class="modal__close-button">
      Close
    </button>
    <div class="modal__content">
      <h2>Modal</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste animi impedit amet perferendis aspernatur, ipsum sunt praesentium id excepturi numquam neque qui adipisci? Consectetur numquam, aliquid facere, eos aperiam minima!</p>
    </div>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/praliedutzel/modal-window-XpqoBa */
    .no-scroll {
  width: 100%;
  position: fixed;
  overflow-y: hidden;
}

.container {
  width: 100%;
  max-width: 60em;
  margin: auto;
  padding: 0 2em;
  text-align: left;
}

.modal-trigger {
  
}

.modal {
  background-color: rgba(18,118,208,0.75);
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  overflow-y: auto;
  pointer-events: none;
  transition: visibility 0.3s, opacity 0.3s;
  
  &.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

.modal__close-button {
  top: 0;
  right: 0;
  position: absolute;
}

.modal__container {
  background-color: #fff;
  width: 100%;
  max-width: 30em;
  right: 0;
  left: 0;
  margin: 10% auto;
  padding: 3em 2em 2em 2em;
  position: relative;
}


// The code below this point is used for styling the demo
@at-root {
  *, *:before, *:after {
    box-sizing: border-box;
  }
  
  body {
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
    font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
    text-align: center;
  }

  .header {
    background-color: #232439;
    margin-bottom: 2rem;
    padding: 4rem 2rem;
    text-align: center;
    
    a {
      margin-top: 1rem;
      display: block;
      color: #6ddce5;
      font-size: 0.85rem;
      text-decoration: none;
    }
  }

  .header__title {
    margin: 0;
    color: #fff;
    font-weight: 300;
  }
}


/*Downloaded from https://www.codeseek.co/praliedutzel/modal-window-XpqoBa */
    // Open modal
$('.modal-trigger').on('click', function() {
  var scrollOffset = $(window).scrollTop();
  $('body').addClass('no-scroll').css('top', -scrollOffset);
  $('.modal').addClass('is-open');
  
  return false;
});

// Close modal
$('.modal__close-button').on('click', function() {
  var scrollOffset = parseInt($('body').css('top'));
  
  $(this).closest('.modal').removeClass('is-open');
  $('body').removeClass('no-scroll').css('top', '');
  $(window).scrollTop(-scrollOffset);
  
  return false;
});

Comments