picnic/src/plugins/modal/test.html

A lighweight CSS library with nice defaults and many plugins to kickstart your projects

<h2 id="modal">Modal</h2>

<p>
  <label for="modal_1" class="button">
  Show modal
  </label>
</p>

<div class="modal">
  <input id="modal_1" type="checkbox" />
  <label for="modal_1" class="overlay"></label>
  <article>
    <header>
      <h3>Great offer</h3>
      <label for="modal_1" class="close">×</label>
    </header>
    <section class="content">
      We have a special offer for you. I am sure you will love it! However this does look spammy...
    </section>
    <footer>
      <a class="button" href="#">See offer</a>
      <label for="modal_1" class="button dangerous">
        Cancel
      </label>
    </footer>
  </article>
</div>