Skip to content

Instantly share code, notes, and snippets.

Last active March 21, 2024 16:12
Show Gist options
  • Save ghosh/4f94cf497d7090359a5c9f81caf60699 to your computer and use it in GitHub Desktop.
Save ghosh/4f94cf497d7090359a5c9f81caf60699 to your computer and use it in GitHub Desktop.
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;
} {
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">
<button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
<main class="modal__content" id="modal-1-content">
Try hitting the <code>tab</code> key and notice how the focus stays within the modal itself. Also, <code>esc</code> to close modal.
<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>
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;

Copy link

Faq commented Jan 15, 2023

Anyone managed to pass custom attribute with button to fill some field on form?
One form used for several buttons, so custom attribute allows to handle it differently in controller.

Debugger shows that it is not passed with button, button code:
div data-micromodal-trigger='modal-name' data-bundle='1' = t(:button_name)

Tried to achieve something like done here.

document.addEventListener('DOMContentLoaded', () => {
    onShow: (modal) => {

event.currentTarget returns null

Copy link

charlesr1971 commented Jan 15, 2023


You need to initialise the modal like:

  onShow: modal =>`${} is shown`), // [1]
  onClose: modal =>`${} is hidden`), // [2]
  openTrigger: 'data-custom-open', // [3]
  closeTrigger: 'data-custom-close', // [4]
  openClass: 'is-open', // [5]
  disableScroll: true, // [6]
  disableFocus: false, // [7]
  awaitOpenAnimation: false, // [8]
  awaitCloseAnimation: false, // [9]
  debugMode: true // [10]

So you use the onShow event listener to add your logic into or add a function reference.

I always set:

awaitCloseAnimation: true

So for example:

  onShow: function(modal, activeElement, event){
     microModalShow(modal, activeElement, event);

function microModalShow(modal, activeElement, event) {
   if( === ‘someModalId’){
     console.log('event target data bundle id: ',"data-bundle-id")); 
     // 1

Copy link

Faq commented Jan 15, 2023

thank you @charlesr1971 , but still getting:
Uncaught TypeError: Cannot read properties of undefined (reading 'target')
It might be because of using different jquery version?


Your example using:

Copy link

charlesr1971 commented Jan 15, 2023

@Faq Hmmm. That’s a bit strange. Not sure that JQuery is being used, when I reference:

Although, maybe your version of JQuery is clashing with something in the micromodal library. I reckon this is highly unlikely?

All I can say, is that my codePen works, so maybe you have an old version of micromodal?

Try copying my code and then adapting it, for your own purposes. Once you have done this, if it still throws an error, post your code and I will try and debug it.

This kind of code, just won’t work:

$('#edit_data_modal').on('', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var bundle_id ='bundle_id'); // Extract info from data-* attributes
    var modal = $(this);

Copy link

Faq commented Jan 15, 2023

Yeah that was the case, had 0.4.2, solved with yarn upgrade micromodal@^0.4.10, again thank you :)

Copy link

@Faq Awesome 👏🏻

Copy link

Has any one integrated a way to have next and previous buttons for every modal thats on the page?

Copy link

charlesr1971 commented Jan 30, 2024

@jason-enstedt Yes. You could do something like:


var ordinal = 0;
function microModalShow(dir){
  var dir = (arguments[0] != null) ? arguments[0] : 'next';
	const modal = document.querySelectorAll(".modal");
	const max = modal.length;
	console.log('microModalShow modal: ',modal);
	console.log('microModalShow max: ',max);
	if (dir === 'next') {
	else {
	if (ordinal <= 0) {
		ordinal = 1;
	if (max > 0) {
		if (ordinal > max) {
			ordinal = 1;
	}'modal-' + ordinal);


<a href="javascript:void(0);" class="mdl-button" onclick="microModalShow('previous');">Previous</a>
<a href="javascript:void(0);" class="mdl-button" onclick="microModalShow('next');">Next</a>

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