Designsystem

Modal 

<div>
    <a data-micromodal-trigger="modal-1" href="#">Modale</a>
</div>
<div class="modal micromodal-slide" id="modal-1" aria-hidden="true">
    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
        <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
            <header class="modal__header">
                <span class="modal__closetext">Fermer</span><button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
            </header>
            <main class="modal__content" id="modal-1-content">
                <p class="modal__title">Donec ornare sem sem, sed blandit ligula gravida eu.</p>
                <p class="modal__text">Nam vestibulum ipsum enim, in lobortis risus ornare quis. Cras fermentum quam quis bibendum tristique. Sed vel turpis pretium, consectetur ligula ut, efficitur libero. Nunc risus massa, pharetra at rhoncus eu, convallis in libero. Etiam
                    fermentum porttitor nisl a mollis. Morbi at lorem mi. Sed vel justo sit amet lacus tempor egestas. Aliquam vel aliquam lacus. Praesent nec ipsum magna. Cras vel sapien mauris. Etiam fringilla facilisis nunc et laoreet.</p>
            </main>
            <footer class="modal__footer">
                <button class="btn btn-primary" data-micromodal-close aria-label="Close this dialog window">supprimer</button>
            </footer>
        </div>
    </div>
</div>

<script type="text/javascript" src="../../js/vendors/micromodal/micromodal.js"></script>
<script>
    MicroModal.init({
        openTrigger: 'data-micromodal-trigger',
        closeTrigger: 'data-micromodal-close',
        disableScroll: true,
        disableFocus: false,
        awaitOpenAnimation: false,
        awaitCloseAnimation: true
    });
</script>
 
<div>
  <a data-micromodal-trigger="modal-1" href="#">Modale</a>
</div>
<div class="modal micromodal-slide" id="modal-1" aria-hidden="true">
  <div class="modal__overlay" tabindex="-1" data-micromodal-close>
    <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
      <header class="modal__header">
        <span class="modal__closetext">Fermer</span><button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
      </header>
      <main class="modal__content" id="modal-1-content">
        <p class="modal__title">{{title}}</p>
        <p class="modal__text">{{text}}</p>
      </main>
      <footer class="modal__footer">
        <button class="btn btn-primary" data-micromodal-close aria-label="Close this dialog window">supprimer</button>
      </footer>
    </div>
  </div>
</div>

<script type="text/javascript" src="../../js/vendors/micromodal/micromodal.js"></script>
<script>
  MicroModal.init({
    openTrigger: 'data-micromodal-trigger',
    closeTrigger: 'data-micromodal-close',
    disableScroll: true,
    disableFocus: false,
    awaitOpenAnimation: false,
    awaitCloseAnimation: true
  });
</script>
 
{
  "title": "Donec ornare sem sem, sed blandit ligula gravida eu.",
  "text": "Nam vestibulum ipsum enim, in lobortis risus ornare quis. Cras fermentum quam quis bibendum tristique. Sed vel turpis pretium, consectetur ligula ut, efficitur libero. Nunc risus massa, pharetra at rhoncus eu, convallis in libero. Etiam fermentum porttitor nisl a mollis. Morbi at lorem mi. Sed vel justo sit amet lacus tempor egestas. Aliquam vel aliquam lacus. Praesent nec ipsum magna. Cras vel sapien mauris. Etiam fringilla facilisis nunc et laoreet."
}

Micromodal.js

Made with love License Package version Build Status

Tiny, dependency-free javascript library for creating accessible modal dialogs

The aim of this library is to make modal dialogs accessible and easy to include in your project with minimum configuration. It’s only ~1.8kb minified and gzipped - A tiny library for big change.

Demo and documentation

 

Features

✔ Toggles relevant aria attributes on open and close

✔ Closes modal on overlay click

✔ Closes modal on pressing the esc key

✔ Traps tab focus within the modal

✔ Focuses on the first focusable element within the modal

✔ Retains the focused element state after closing the modal

 

Installation

via npm

npm install micromodal --save

via yarn

yarn add micromodal

via CDN direct link

<script src="https://cdn.jsdelivr.net/npm/micromodal/dist/micromodal.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>

direct download

curl -o https://unpkg.com/micromodal/dist/micromodal.min.js

 

IE 11 and below

Please use this pollyfill suggested here.

 

Changelog

Find the latest changelog here.

 

Contributing

We are always open and invite developers to contribute to Micromodal. We have kept the guidelines and process dead simple, so you invest more time in making modals accessible to all.

Micromodal follows the standardjs coding standard and is part of our package.json file. It will help us to maintain consistency in the code base.

Development setup

  1. Clone Github repo $ git clone https://github.com/ghosh/micromodal.git
  2. Install yarn package manager (Read installation guide)
  3. Run yarn install in the root folder to install all dependencies
  4. Run yarn dev to start a dev server. This serves the example directory and live reloads when any files are changed
  5. [Optional] Run yarn build to build the files for distribution. This is run automatically as a pre-commit hook as well.
  6. Send us pull request and chill

 

Licensing

This project is licensed under MIT license.

 

  • Microtip - Modern, lightweight, accessible css tooltip library. Just 1kb.

 

Contact

You can mention us on Twitter for any questions, suggestions or just send us funny GIF. We ♥️ GIFs.

Tweet some love

Tweet about Micromodal and help us to spread the message about the importance of Web accessibility and Inclusive design.

 

Created and maintained by

Indrashish Ghosh – @_ighosh 🇮🇳

Kalpesh Singh - @knowkalpesh 🇮🇳

Darpan Kakadia - @kakadiadarpan 🇩🇪

Contributors - list 🌐