/**************************\ | |
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> |
This comment has been minimized.
This comment has been minimized.
It looks like elements that have the |
This comment has been minimized.
This comment has been minimized.
You have saved my precious time and money. |
This comment has been minimized.
This comment has been minimized.
This is the best thing since sliced Bread! |
This comment has been minimized.
This comment has been minimized.
Here is a version of the code that works in IE as well. Specifically, I have used a polyfill for Object.assign And:
Is replaced with:
Here is the full code:
|
This comment has been minimized.
This comment has been minimized.
For some reason, the close animation isn't working for me (the open one works). Edit: I solved my problem. I did have |
This comment has been minimized.
This comment has been minimized.
@jeffreymeng looks like you need to set the |
This comment has been minimized.
This comment has been minimized.
@nik-s I do have awaitCloseAnimation set to true right now. Is it working for you? |
This comment has been minimized.
This comment has been minimized.
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: 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:
Also there is the following warning in the Chrome Console: Does anybody knows how to run this? |
This comment has been minimized.
This comment has been minimized.
@Nitij For starters, you need to add the minimum CSS for the modal in the head of your HTML document. |
This comment has been minimized.
This comment has been minimized.
@charlesr1971 And what is that Css? Is it this one?
I added it and still nothing works.
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. |
This comment has been minimized.
This comment has been minimized.
@Nitij I must say this statement:
Is incredibly misleading and should probably be removed from the docs. I reckon this causes most of the confusion! |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
@Nitij I think the important thing is that .micromodal-slide is added to the outer most modal div. |
This comment has been minimized.
This comment has been minimized.
@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: |
This comment has been minimized.
This comment has been minimized.
Is it possible to pass data or use data binding like bootstrap modal with MicroModal.js? |
This comment has been minimized.
This comment has been minimized.
Just looking for a bare minimum demo. I copied the code from the site. Why is this not working? |
This comment has been minimized.
This comment has been minimized.
@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. If you need any further help, setting things up, don’t hesitate to ask... |
This comment has been minimized.
This comment has been minimized.
@charlesr1971 Thanks!! That second one was helpful. I agree with your comment:
|
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
@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! |
This comment has been minimized.
This comment has been minimized.
@charlesy1971 I have persevered with this package but I would advise anyone reading this not to bother. |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
Demos are really helpful. Thank you for those who posted. |
This comment has been minimized.
This comment has been minimized.
@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! |
This comment has been minimized.
This comment has been minimized.
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:
|
This comment has been minimized.
This comment has been minimized.
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 Also, if you animate the modal closing, then Thanks to the authors and to others for persisting with this. |
This comment has been minimized.
This comment has been minimized.
@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] |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
Why can’t you just copy & paste it, into your repo? And then maintain it from there? I am not sure what Babel is? |
This comment has been minimized.
This comment has been minimized.
@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! |
This comment has been minimized.
This comment has been minimized.
Is there any css sample for mobile? |
This comment has been minimized.
This comment has been minimized.
Hello How I can pass some value to modal ? I try to use the option openTrigger: 'data-custom-open' but doesn't worked... |
This comment has been minimized.
This comment has been minimized.
For those who give up on micromodal, charlesr1971 also posted a couple of alternatives above (material, angular) but I don't find them easy to use, so I'll point out here that there's a great, straightforward, accessible dialog from Ire Adenirokun at https://bitsofco.de/accessible-modal-dialog/ The IA code uses display;none / display:block but if you substitute this for another method of initial hiding (eg, css clip:rect) then the dialog display can be animated. Micromodal makes it very easy to have multiple modals. My js ability is rudimentary so with IA's version it took me a lot of stabbing around in the dark to use multiple dialogs, but can be done. There's also the Eden Spiekerman a11y dialog at http://edenspiekermann.github.io/a11y-dialog/#introduction - has had a lot of developer input. It uses the new native 'dialog' element when available (currently only Chrome/Edge) which may be good but has major drawback that dialog::backdrop does not currently accept a click to close, though a workaround to use vanilla js overlay is suggested (in 'closed issues' tab). Apologies to micromodal's developer for directing visitors away - just suggesting some alternatives. |
This comment has been minimized.
This comment has been minimized.
And here is an ES5 version, if anyone needs it:
|
This comment has been minimized.
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?