January 2, 2017

Pure CSS modalはjavascriptは使わないCSSモーダルポップアップ。

<link rel="stylesheet"bower_components/pure-css-modal/css/modal.css"/>

<div class="modal">
  <input id="modal-trigger" class="checkbox" type="checkbox">
  <div class="modal-overlay">
    <label for="modal-trigger" class="o-close"></label>
    <div class="modal-wrap">
      <label for="modal-trigger" class="close">&#10006;</label>
      <h2>This is the modal content</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique cum sequi maxime officia provident voluptatibus aut! Non autem asperiores repellat architecto laboriosam officiis ab libero enim illo animi, error alias.
      </p>
    </div>
  </div>
</div>

trigger

<label for="modal-trigger">Launch modal</label>

MIT