CSS

【CSS】Pure CSSで構築されたモーダルCSS Modal

May 3, 2017
CSS Modals

CSS ModalはPure CSSで構築されたモーダル。

Markup

<section class="modal--show" id="modal-text" tabindex="-1"
        role="dialog" aria-labelledby="modal-label" aria-hidden="true">

    <div class="modal-inner">
        <header id="modal-label"><!-- Header --></header>
        <div class="modal-content"><!-- The modals content --></div>
        <footer><!-- Footer --></footer>
    </div>

    <a href="#!" class="modal-close" title="Close this modal" data-close="Close"
        data-dismiss="modal">?</a>
</section>

IDをリンク要素に設定するだけでモーダルにリンク

<a href="#modal">Modal</a>

Browser Support

  1. Chrome
  2. Firefox
  3. Safari 6.x
  4. Opera 12+
  5. Internet Explorer 8 (functional)
  6. Internet Explorer 9+
  7. iOS 6
  8. Android 2.3 (functional)
  9. Android 4.x
  10. Windows Phone 8

MIT