Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Demo modal styles for micromodal.js and corresponding expected html. If using this, set the `awaitCloseAnimation` in config to true
/**************************\
Basic Modal Styles
\**************************/
.modal {
font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
}
.modal__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: flex;
justify-content: center;
align-items: center;
}
.modal__container {
background-color: #fff;
padding: 30px;
max-width: 500px;
max-height: 100vh;
border-radius: 4px;
overflow-y: auto;
box-sizing: border-box;
}
.modal__header {
display: flex;
justify-content: space-between;
align-items: center;
}
.modal__title {
margin-top: 0;
margin-bottom: 0;
font-weight: 600;
font-size: 1.25rem;
line-height: 1.25;
color: #00449e;
box-sizing: border-box;
}
.modal__close {
background: transparent;
border: 0;
}
.modal__header .modal__close:before { content: "\2715"; }
.modal__content {
margin-top: 2rem;
margin-bottom: 2rem;
line-height: 1.5;
color: rgba(0,0,0,.8);
}
.modal__btn {
font-size: .875rem;
padding-left: 1rem;
padding-right: 1rem;
padding-top: .5rem;
padding-bottom: .5rem;
background-color: #e6e6e6;
color: rgba(0,0,0,.8);
border-radius: .25rem;
border-style: none;
border-width: 0;
cursor: pointer;
-webkit-appearance: button;
text-transform: none;
overflow: visible;
line-height: 1.15;
margin: 0;
will-change: transform;
-moz-osx-font-smoothing: grayscale;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
transition: -webkit-transform .25s ease-out;
transition: transform .25s ease-out;
transition: transform .25s ease-out,-webkit-transform .25s ease-out;
}
.modal__btn:focus, .modal__btn:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.modal__btn-primary {
background-color: #00449e;
color: #fff;
}
/**************************\
Demo Animation Style
\**************************/
@keyframes mmfadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes mmfadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes mmslideIn {
from { transform: translateY(15%); }
to { transform: translateY(0); }
}
@keyframes mmslideOut {
from { transform: translateY(0); }
to { transform: translateY(-10%); }
}
.micromodal-slide {
display: none;
}
.micromodal-slide.is-open {
display: block;
}
.micromodal-slide[aria-hidden="false"] .modal__overlay {
animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.micromodal-slide[aria-hidden="false"] .modal__container {
animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}
.micromodal-slide[aria-hidden="true"] .modal__overlay {
animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.micromodal-slide[aria-hidden="true"] .modal__container {
animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}
.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
will-change: transform;
}
<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">
<h2 class="modal__title" id="modal-1-title">
Micromodal
</h2>
<button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
</header>
<main class="modal__content" id="modal-1-content">
<p>
Try hitting the <code>tab</code> key and notice how the focus stays within the modal itself. Also, <code>esc</code> to close modal.
</p>
</main>
<footer class="modal__footer">
<button class="modal__btn modal__btn-primary">Continue</button>
<button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
</footer>
</div>
</div>
</div>
@yoowo222
Copy link

yoowo222 commented May 27, 2021

Hello everyone, I try to use barba.js to load Ajax, but after loading the page, micromodal doesn't work. Is there a solution?

@charlesr1971
Copy link

charlesr1971 commented May 27, 2021

@yoowo222 Have you tried loading the micromodal without barbs.js? We need to make sure that the micromodal is working without any interference.

I use this to initiate micromodal:

try{
 MicroModal.init({
  awaitCloseAnimation: true,
  onShow: function(modal){
  // do something when modal opens
  },
  onClose: function(modal){
   // do something when modal closes
  }
 });
}
catch(e){
 console.log('micromodal error: ',e);
}

@charlesr1971
Copy link

charlesr1971 commented May 27, 2021

You need to place the init code inside:

window.addEventListener('DOMContentLoaded', function(){ 
});

@yoowo222
Copy link

yoowo222 commented May 27, 2021

@charlesr1971 Thank you. I've tried to do it myself. I put it here
afterEnter: (data) => {}

@joshliptzin
Copy link

joshliptzin commented Jul 7, 2021

Doesn't work when used with jquery

@charlesr1971
Copy link

charlesr1971 commented Jul 7, 2021

@joshliptzin I use it with jQuery without any problems…

@charlesr1971
Copy link

charlesr1971 commented Jul 7, 2021

Is there any css sample for mobile?

@victorrica Here are two examples that work on the mobile:

https://codepen.io/charles1971/pen/qBELEVN
https://codepen.io/charles1971/pen/BayGZBK

If you want to make the modal full width/height on the mobile, then just add 100% to both properties in the CSS

@Meidanmor
Copy link

Meidanmor commented Sep 20, 2021

This library is perfect !
Only problem I have is on touch screen when I close the modal it clicks on the element under
So If I click on the close button and there is a link behind the close button it will click on the link too which is not good since that redirects me to the links page..

@kbzaso
Copy link

kbzaso commented Oct 14, 2021

This work for me.
I install microModal via NPM, and modify the micromodal.js inside the node_module, the line 80.

I change false for true

awaitCloseAnimation = _ref$awaitCloseAnimat === void 0 ? true : _ref$awaitCloseAnimat,

I hope this can help anyone.

@Elkaroui
Copy link

Elkaroui commented Mar 18, 2022

I find this library is sample is so useful,
You can easily use this library to change model to slide menu, I shared my example here if anyone interested 😁

https://codepen.io/Elkazi/pen/bGaEmKz

@charlesr1971
Copy link

charlesr1971 commented Mar 18, 2022

I find this library is sample is so useful, You can easily use this library to change model to slide menu, I shared my example here if anyone interested 😁

https://codepen.io/Elkazi/pen/bGaEmKz

Very cool! 🙏

@panphora
Copy link

panphora commented Apr 20, 2022

For anyone who comes back to this in the future, here's a minimal working example that you can just copy & paste:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>micromodal demo</title>
  <style>
    .micromodal {
      display: none;
    }

    .micromodal.is-open {
      display: block;
    }

    .micromodal__overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(0,0,0,0.65);
    }

    .micromodal__container {
      box-sizing: border-box;
      overflow-y: auto;
      max-width: 500px;
      max-height: 100vh;
      padding: 30px;
      background-color: #fff;
      border-radius: 4px;
    }

    .micromodal[aria-hidden="false"] .micromodal__overlay {
      animation: microModalFadeIn .2s cubic-bezier(0.0, 0.0, 0.2, 1);
    }

    .micromodal[aria-hidden="false"] .micromodal__container {
      animation: microModalSlideIn .2s cubic-bezier(0, 0, .2, 1);
    }

    .micromodal .micromodal__container,
    .micromodal .micromodal__overlay {
      will-change: transform;
    }

    @keyframes microModalFadeIn {
        from { opacity: 0; }
          to { opacity: 1; }
    }

    @keyframes microModalSlideIn {
      from { transform: translateY(15%); }
        to { transform: translateY(0); }
    }
  </style>
</head>
<body>
  <a data-micromodal-trigger="modal-1" href='javascript:;'>Open Modal Dialog</a>

  <div class="micromodal" id="modal-1" aria-hidden="true">
    <div class="micromodal__overlay" tabindex="-1" data-micromodal-close>
      <div class="micromodal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
        <button aria-label="Close modal" data-micromodal-close>X</button>
        <p>hi there, I'm some modal content!</p>
      </div>
    </div>
  </div>
  <script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
  <script>
    MicroModal.init();
  </script> 
</body>
</html>

And here's a working codepen of the same code: https://codepen.io/panphora/pen/yLpwOOo

I made a few stylistic choices:

  • I removed the exit animation. If people are exiting a modal, they probably just want it gone instantly.
  • I cut down on the header content & aria labels there. Useful for some modals, but not every modal has a header.
  • I cut down on the number of classes & grouped all the CSS under a .micromodal class. Much easier to read this way.

@proimage
Copy link

proimage commented Aug 25, 2022

I've found that if you add an SVG icon (or presumably any other element) inside the Close button, clicking on that icon doesn't appear to bubble up to the close button, and won't close the modal. The simple solution is to add this CSS (adapt the selector to your needs, but take care because the overlay element containing the modal has [data-micromodal-close], too):

button[data-micromodal-close] > .icon {
    pointer-events: none;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment