Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                .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;
  }
}
              
            
!

JS

              
                // 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;
});
              
            
!
999px

Console