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

This comment has been minimized.

Copy link

@mariohernandez mariohernandez commented May 22, 2018

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?

@crhallberg

This comment has been minimized.

Copy link

@crhallberg crhallberg commented May 30, 2018

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.

@ping-o-blast

This comment has been minimized.

Copy link

@ping-o-blast ping-o-blast commented May 31, 2018

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

@tejpal-sohal

This comment has been minimized.

Copy link

@tejpal-sohal tejpal-sohal commented Aug 2, 2018

This is the best thing since sliced Bread!

@charlesr1971

This comment has been minimized.

Copy link

@charlesr1971 charlesr1971 commented Jul 5, 2019

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()
            }
        }
    }()
})
@jeffreymeng

This comment has been minimized.

Copy link

@jeffreymeng jeffreymeng commented Jan 9, 2020

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

@nik-s

This comment has been minimized.

Copy link

@nik-s nik-s commented Jan 16, 2020

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

@jeffreymeng

This comment has been minimized.

Copy link

@jeffreymeng jeffreymeng commented Jan 16, 2020

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

@Nitij

This comment has been minimized.

Copy link

@Nitij Nitij commented Jan 20, 2020

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?

@charlesr1971

This comment has been minimized.

Copy link

@charlesr1971 charlesr1971 commented Jan 20, 2020

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

@Nitij

This comment has been minimized.

Copy link

@Nitij Nitij commented Jan 20, 2020

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

@charlesr1971

This comment has been minimized.

Copy link

@charlesr1971 charlesr1971 commented Jan 20, 2020

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

@Nitij

This comment has been minimized.

Copy link

@Nitij Nitij commented Jan 20, 2020

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

@charlesr1971

This comment has been minimized.

Copy link

@charlesr1971 charlesr1971 commented Jan 20, 2020

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

@charlesr1971

This comment has been minimized.

Copy link

@charlesr1971 charlesr1971 commented Jan 21, 2020

@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

@krisnaw

This comment has been minimized.

Copy link

@krisnaw krisnaw commented Feb 28, 2020

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

@spencerwasden

This comment has been minimized.

Copy link

@spencerwasden spencerwasden commented Jul 6, 2020

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

@charlesr1971

This comment has been minimized.

Copy link

@charlesr1971 charlesr1971 commented Jul 6, 2020

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

@spencerwasden

This comment has been minimized.

Copy link

@spencerwasden spencerwasden commented Jul 6, 2020

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

@feederaccount

This comment has been minimized.

Copy link

@feederaccount feederaccount commented Jul 20, 2020

@charlesr1971 Thankyou

For a library that advertises itself as being simple, lightweight, micro, I find it bizarre that the author has fallen at the final hurdle of providing a no-nonsense demo that actually works.

@charlesr1971

This comment has been minimized.

Copy link

@charlesr1971 charlesr1971 commented Jul 21, 2020

@feederaccount Yes. The author went to so much trouble building this library and writing the documentation, but when you try and use the source code, nothing actually works.

A demo is absolutely vital, as a proof of concept.

For some reason, I really like the API, so I felt it was worthwhile, proving that this thing actually works!

@feederaccount

This comment has been minimized.

Copy link

@feederaccount feederaccount commented Jul 22, 2020

@charlesy1971 I have persevered with this package but I would advise anyone reading this not to bother.

@charlesr1971

This comment has been minimized.

Copy link

@charlesr1971 charlesr1971 commented Jul 22, 2020

@feederaccount I use this library all the time now. Once, you have the correct CSS, it is solid. All the API options work correctly. I think my 2 CodePen examples prove that this library can be utilized successfully.

@lifeinchords

This comment has been minimized.

Copy link

@lifeinchords lifeinchords commented Jul 27, 2020

Demos are really helpful. Thank you for those who posted.
Keep in mind this is free, author doesn't owe anyone anything. Be nice :)
This gist is a working example.

@charlesr1971

This comment has been minimized.

Copy link

@charlesr1971 charlesr1971 commented Jul 27, 2020

@lifeinchords I agree with your sentiments.

We should always be nice to authors, who often make a big effort. I think we are trying to provide some constructive criticism to how this library could have been made more valuable, if there had been working demo, right from the start. I mean let’s face it, a demo is the bare minimum for any library. It seems strange that the author went to such a great effort, writing the code and then forgot about the final piece of the puzzle!

Anyway, I hope my codePens can act as the demo page!

@mattkaye

This comment has been minimized.

Copy link

@mattkaye mattkaye commented Aug 23, 2020

I dug into the library code a bit and the only way I could get the exit animation working was passing a config value as the second argument to the show method. I'm using nuxt for what it's worth:

MicroModal.show('modal-1', { awaitCloseAnimation: true })

@piperh

This comment has been minimized.

Copy link

@piperh piperh commented Aug 25, 2020

charlesr1971, I used your full code as posted above in comments (not from your codePens) and it resolved an issue.

Within the modal I have 2 buttons, an 'X' close button and a 'Buy' button. With the authors' original code, when you add 'data-micromodal-close' to the close button the initial focus goes to the other button. This causes the modal, on opening, to slide to the focussed element (which happens to be at the bottom of the div), so in the case of a modal with content taller than the browser window the top part of the div is out of view. Playing with tabindex or autofocus in the html made no difference. Your code resolves the issue. The close button is the first item in my modal__container and focus is now initially on it when the window is opened.

Apart from the above, a couple of general observations: if you set
disableScroll: true
you get a nasty content horizontal jump in the base, underneath modal, when the page scrollbar (if present) is hidden and shown.

Also, if you animate the modal closing, then
awaitCloseAnimation: true
is essential if the triggering object in the base is not entirely covered by the modal content above it. Otherwise, on touchscreen it becomes possible to retrigger the modal whenever you tap the overlay outside the modal content window.

Thanks to the authors and to others for persisting with this.

@charlesr1971

This comment has been minimized.

Copy link

@charlesr1971 charlesr1971 commented Aug 25, 2020

@piperh Thanks for these observations. Yes, despite a few issues and the lack of a demo, create by the author, this little library is worth persisting with. I use it for all my projects in production.

I also recommend having a look at Google's Material Lite [Vanilla JS/CSS] and Angular Material libraries. Both, have modal components, which are pretty robust:

https://getmdl.io/components/index.html#dialog-section [Dialog component]
https://material.angular.io/components/dialog/overview [Dialog component]

@yor-so

This comment has been minimized.

Copy link

@yor-so yor-so commented Sep 19, 2020

@charlesr1971 the code you shared above for IE is great. I'd like to use it in my proyects that support IE, but if I want to fix a bug or I want to add improvements, that code is unmaintainable. Can you please explain me how did you generate that code? Are you using babel? I tried different settings in babel and I can't get any code similar to yours. Plus, the generated code I'm getting in babel is actually not working in IE. I'd really appreciate your help.

@charlesr1971

This comment has been minimized.

Copy link

@charlesr1971 charlesr1971 commented Sep 19, 2020

Why can’t you just copy & paste it, into your repo? And then maintain it from there? I am not sure what Babel is?

@stuartchaney

This comment has been minimized.

Copy link

@stuartchaney stuartchaney commented Sep 21, 2020

@charlesr1971 - really appreciate your input for this library 🙏

Any chance you have a codepen with your IE code present?

I can't seem to get it to work 😞

Thanks!

@victorrica

This comment has been minimized.

Copy link

@victorrica victorrica commented Sep 22, 2020

Is there any css sample for mobile?

@guilherme-funchal

This comment has been minimized.

Copy link

@guilherme-funchal guilherme-funchal commented Sep 23, 2020

Hello

How I can pass some value to modal ?

I try to use the option openTrigger: 'data-custom-open' but doesn't worked...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.