Demo modal styles for micromodal.js and corresponding expected html. If using this, set the `awaitCloseAnimation` in config to true

micromodal.css

/**************************\
  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;
}

micromodal.html

  <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>

I'm looking to only be able to close the modal with the Yes button and not with the ESC key or by clicking away from the modal. Have you done anything like that?

It looks like elements that have the data-micromodal-close attribute trigger the close, so you'll want to remove that from modal__overlay and add it to your Yes button. As far as the ESC button goes, I cannot say.

You have saved my precious time and money.
Thanks
www.pingoblast.com

This is the best thing since sliced Bread!

Here is a version of the code that works in IE as well.

Specifically, I have used a polyfill for

Object.assign

And:

return Array.from(e);

Is replaced with:

return [].slice.call(e);

Here is the full code:

! function(e, o) {
    "object" == typeof exports && "undefined" != typeof module ? module.exports = o() : "function" == typeof define && define.amd ? define(o) : e.MicroModal = o()
}(this, function() {
    "use strict"
	if (typeof Object.assign != 'function') {
	  Object.assign = function(target) {
		'use strict';
		if (target == null) {
		  throw new TypeError('Cannot convert undefined or null to object');
		}
		target = Object(target);
		for (var index = 1; index < arguments.length; index++) {
		  var source = arguments[index];
		  if (source != null) {
			for (var key in source) {
			  if (Object.prototype.hasOwnProperty.call(source, key)) {
				target[key] = source[key];
			  }
			}
		  }
		}
		return target;
	  };
	}
    var e = function(e, o) {
            if (!(e instanceof o)) throw new TypeError("Cannot call a class as a function")
        },
        o = function() {
            function e(e, o) {
                for (var t = 0; t < o.length; t++) {
                    var i = o[t]
                    i.enumerable = i.enumerable || !1, i.configurable = !0, "value" in i && (i.writable = !0), Object.defineProperty(e, i.key, i)
                }
            }
            return function(o, t, i) {
                return t && e(o.prototype, t), i && e(o, i), o
            }
        }(),
        t = function(e) {
            if (Array.isArray(e)) {
                for (var o = 0, t = Array(e.length); o < e.length; o++) t[o] = e[o]
                return t
            }
            //return Array.from(e)
			return [].slice.call(e);
        }
    return function() {
        var i = ["a[href]", "area[href]", 'input:not([disabled]):not([type="hidden"]):not([aria-hidden])', "select:not([disabled]):not([aria-hidden])", "textarea:not([disabled]):not([aria-hidden])", "button:not([disabled]):not([aria-hidden])", "iframe", "object", "embed", "[contenteditable]", '[tabindex]:not([tabindex^="-"])'],
            n = function() {
                function n(o) {
                    var i = o.targetModal,
                        a = o.triggers,
                        r = void 0 === a ? [] : a,
                        s = o.onShow,
                        l = void 0 === s ? function() {} : s,
                        c = o.onClose,
                        d = void 0 === c ? function() {} : c,
                        u = o.openTrigger,
                        f = void 0 === u ? "data-micromodal-trigger" : u,
                        h = o.closeTrigger,
                        v = void 0 === h ? "data-micromodal-close" : h,
                        g = o.disableScroll,
                        m = void 0 !== g && g,
                        b = o.disableFocus,
                        y = void 0 !== b && b,
                        w = o.awaitCloseAnimation,
                        k = void 0 !== w && w,
                        p = o.debugMode,
                        E = void 0 !== p && p
                    e(this, n), this.modal = document.getElementById(i), this.config = {
                        debugMode: E,
                        disableScroll: m,
                        openTrigger: f,
                        closeTrigger: v,
                        onShow: l,
                        onClose: d,
                        awaitCloseAnimation: k,
                        disableFocus: y
                    }, r.length > 0 && this.registerTriggers.apply(this, t(r)), this.onClick = this.onClick.bind(this), this.onKeydown = this.onKeydown.bind(this)
                }
                return o(n, [{
                    key: "registerTriggers",
                    value: function() {
                        for (var e = this, o = arguments.length, t = Array(o), i = 0; i < o; i++) t[i] = arguments[i]
                        t.filter(Boolean).forEach(function(o) {
                            o.addEventListener("click", function() {
                                return e.showModal()
                            })
                        })
                    }
                }, {
                    key: "showModal",
                    value: function() {
                        this.activeElement = document.activeElement, this.modal.setAttribute("aria-hidden", "false"), this.modal.classList.add("is-open"), this.setFocusToFirstNode(), this.scrollBehaviour("disable"), this.addEventListeners(), this.config.onShow(this.modal)
                    }
                }, {
                    key: "closeModal",
                    value: function() {
                        var e = this.modal
                        this.modal.setAttribute("aria-hidden", "true"), this.removeEventListeners(), this.scrollBehaviour("enable"), this.activeElement && this.activeElement.focus(), this.config.onClose(this.modal), this.config.awaitCloseAnimation ? this.modal.addEventListener("animationend", function o() {
                            e.classList.remove("is-open"), e.removeEventListener("animationend", o, !1)
                        }, !1) : e.classList.remove("is-open")
                    }
                }, {
                    key: "closeModalById",
                    value: function(e) {
                        this.modal = document.getElementById(e), this.modal && this.closeModal()
                    }
                }, {
                    key: "scrollBehaviour",
                    value: function(e) {
                        if (this.config.disableScroll) {
                            var o = document.querySelector("body")
                            switch (e) {
                                case "enable":
                                    Object.assign(o.style, {
                                        overflow: "",
                                        height: ""
                                    })
                                    break
                                case "disable":
                                    Object.assign(o.style, {
                                        overflow: "hidden",
                                        height: "100vh"
                                    })
                            }
                        }
                    }
                }, {
                    key: "addEventListeners",
                    value: function() {
                        this.modal.addEventListener("touchstart", this.onClick), this.modal.addEventListener("click", this.onClick), document.addEventListener("keydown", this.onKeydown)
                    }
                }, {
                    key: "removeEventListeners",
                    value: function() {
                        this.modal.removeEventListener("touchstart", this.onClick), this.modal.removeEventListener("click", this.onClick), document.removeEventListener("keydown", this.onKeydown)
                    }
                }, {
                    key: "onClick",
                    value: function(e) {
                        e.target.hasAttribute(this.config.closeTrigger) && (this.closeModal(), e.preventDefault())
                    }
                }, {
                    key: "onKeydown",
                    value: function(e) {
                        27 === e.keyCode && this.closeModal(e), 9 === e.keyCode && this.maintainFocus(e)
                    }
                }, {
                    key: "getFocusableNodes",
                    value: function() {
                        var e = this.modal.querySelectorAll(i)
                        return Array.apply(void 0, t(e))
                    }
                }, {
                    key: "setFocusToFirstNode",
                    value: function() {
                        if (!this.config.disableFocus) {
                            var e = this.getFocusableNodes()
                            e.length && e[0].focus()
                        }
                    }
                }, {
                    key: "maintainFocus",
                    value: function(e) {
                        var o = this.getFocusableNodes()
                        if (this.modal.contains(document.activeElement)) {
                            var t = o.indexOf(document.activeElement)
                            e.shiftKey && 0 === t && (o[o.length - 1].focus(), e.preventDefault()), e.shiftKey || t !== o.length - 1 || (o[0].focus(), e.preventDefault())
                        } else o[0].focus()
                    }
                }]), n
            }(),
            a = null,
            r = function(e, o) {
                var t = []
                return e.forEach(function(e) {
                    var i = e.attributes[o].value
                    void 0 === t[i] && (t[i] = []), t[i].push(e)
                }), t
            },
            s = function(e) {
                if (!document.getElementById(e)) return console.warn("MicroModal v0.3.2: ❗Seems like you have missed %c'" + e + "'", "background-color: #f8f9fa;color: #50596c;font-weight: bold;", "ID somewhere in your code. Refer example below to resolve it."), console.warn("%cExample:", "background-color: #f8f9fa;color: #50596c;font-weight: bold;", '<div class="modal" id="' + e + '"></div>'), !1
            },
            l = function(e) {
                if (e.length <= 0) return console.warn("MicroModal v0.3.2: ❗Please specify at least one %c'micromodal-trigger'", "background-color: #f8f9fa;color: #50596c;font-weight: bold;", "data attribute."), console.warn("%cExample:", "background-color: #f8f9fa;color: #50596c;font-weight: bold;", '<a href="#" data-micromodal-trigger="my-modal"></a>'), !1
            },
            c = function(e, o) {
                if (l(e), !o) return !0
                for (var t in o) s(t)
                return !0
            }
        return {
            init: function(e) {
                var o = Object.assign({}, {
                        openTrigger: "data-micromodal-trigger"
                    }, e),
                    i = [].concat(t(document.querySelectorAll("[" + o.openTrigger + "]"))),
                    a = r(i, o.openTrigger)
                if (!0 !== o.debugMode || !1 !== c(i, a))
                    for (var s in a) {
                        var l = a[s]
                        o.targetModal = s, o.triggers = [].concat(t(l)), new n(o)
                    }
            },
            show: function(e, o) {
                var t = o || {}
                t.targetModal = e, !0 === t.debugMode && !1 === s(e) || (a = new n(t), a.showModal())
            },
            close: function(e) {
                e ? a.closeModalById(e) : a.closeModal()
            }
        }
    }()
})

For some reason, the close animation isn't working for me (the open one works).
Does anybody know why this might happen?

Edit: I solved my problem. I did have awaitCloseAnimation set to true, however I was initializing before DOMContentLoaded. My code now looks like this example, except awaitCloseAnimation is set to true in the initialization options object: https://gist.github.com/ghosh/4f94cf497d7090359a5c9f81caf60699#gistcomment-3145307

@jeffreymeng looks like you need to set the awaitCloseAnimation option to true in config: https://micromodal.now.sh/#configuration.

@nik-s I do have awaitCloseAnimation set to true right now. Is it working for you?

I tried to run the basic example given in https://micromodal.now.sh/ using attributes for all the event bindings. That is not working.

I tried in the following browsers:
[x] Chrome
[x] Firefox
[ ] Edge
[ ] Internet Explorer

I am not logging this as an issue because maybe I am doing something wrong, but posting here if anyone can correct me.

Here are the html contents:

<!DOCTYPE html>
<head>
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/micromodal/dist/micromodal.min.js"></script>
</head>

<body>

    <div id="modal-1" aria-hidden="true">        
        <div tabindex="-1" data-micromodal-close>            
            <div role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
                <header>
                    <h2 id="modal-1-title">
                        Modal Title
                    </h2>                    
                    <button aria-label="Close modal" data-micromodal-close></button>
                </header>

                <div id="modal-1-content">
                    Modal Content
                </div>
            </div>
        </div>
    </div>
    
    <a data-micromodal-trigger="modal-1" href='javascript:;'>Open Modal Dialog</a>

    <script>        
        MicroModal.init();
    </script>
</body>

</html>

Also there is the following warning in the Chrome Console:
[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Does anybody knows how to run this?

@Nitij For starters, you need to add the minimum CSS for the modal in the head of your HTML document.

@charlesr1971 And what is that Css? Is it this one?

.modal {
  display: none;
}

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

I added it and still nothing works.

Micromodal does not make any stylistic choices about your modal and hence comes with no styling at all. It does not even toggle the visibility of the modal.

What does that mean? Do we need additional css for basic usage or not?

I doesn't looks like the attribute bindings are working. I haven't yet tried the JS code bindings which clearly work when I see the page source.
If someone can please provide a working html+js code of basic usage then that would be great.

@Nitij I must say this statement:

Micromodal does not make any stylistic choices about your modal and hence comes with no styling at all. It does not even toggle the visibility of the modal.

Is incredibly misleading and should probably be removed from the docs. I reckon this causes most of the confusion!

@charlesr1971 Thank you so much for going through the trouble. Looks like there is boilerplate which is essential.

An attribute only bindings would have been great.

@Nitij I think the important thing is that .micromodal-slide is added to the outer most modal div.
This will then hide the modal on initialisation. Once it is hidden, it can then be opened & closed. This is why the documentation is a little misleading, because it gives the impression that the modal functionality will work without any CSS.

@jeffreymeng @Nitij And here is another demo with scrolling content section. The height of the content section is calculated using JavaScript, based on the total height of the modal container, minus the header & footer:

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

Is it possible to pass data or use data binding like bootstrap modal with MicroModal.js?

Just looking for a bare minimum demo. I copied the code from the site. Why is this not working?
https://codepen.io/spenwa/pen/eYJMmgb

@spencerwasden I can give you 2 links that provide demos that work 100%

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

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

Micromodal can be tricky to get up & running, but once you add a couple of fixes, this library is actually quite robust.
It’s shame the author, didn’t provide a 100% working demo. I think the lack of one, has put many people off.

If you need any further help, setting things up, don’t hesitate to ask...

@charlesr1971 Thanks!! That second one was helpful. I agree with your comment:

It’s shame the author, didn’t provide a 100% working demo. I think the lack of one, has put many people off.