Contents

<div class="modal">
  <label for="modal-matt">
    <div class="btn js-btn">Click for Modal</div>
  </label>
  <input class="modal-state" id="modal-matt" type="checkbox" />
  <div class="modal-window">
    <label class="modal-bg" for="modal-matt"></label>
    <div class="modal-inner">
      <label class="modal-close" for="modal-matt"></label>
      <div class="img-wrapper-modal">
        <img src="" alt="">
      </div>
      <h1>Modal Title</h1>
      <p class="intro">Intro text lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, nam, quas, eaque facilis aliquid cupiditate tempora cumque ipsum accusantium illo modi commodi ullam. Officia, qui corporis nobis dolor temporibus minima.</p>
      <p class="body">Body text lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, placeat, explicabo, veniam quos aperiam molestias molestiae suscipit ipsum enim quasi sit possimus quod atque nobis voluptas earum odit accusamus quibusdam. lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, placeat, explicabo, veniam quos aperiam molestias molestiae suscipit ipsum enim quasi sit possimus quod atque nobis voluptas earum odit accusamus quibusdam.</p>
    </div>
  </div>
</div>

<script>
  $(document).ready(function () {
    $('.modal').find('.js-btn').on('click', function() {
      $(document.body).addClass('modal-open');
    });

    $('.modal-close').on('click', function() {
      $(document.body).removeClass('modal-open');
    })

    $('.modal-bg').on('click', function() {
      $(document.body).removeClass('modal-open');
    })
  })
</script>

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
refills-0.0.1	source/_modal.html.erb