-
-
Save ghosh/4f94cf497d7090359a5c9f81caf60699 to your computer and use it in GitHub Desktop.
/**************************\ | |
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> |
Yeah that was the case, had 0.4.2, solved with yarn upgrade micromodal@^0.4.10
, again thank you :)
@Faq Awesome 👏🏻
Has any one integrated a way to have next and previous buttons for every modal thats on the page?
@jason-enstedt Yes. You could do something like:
JS:
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') {
ordinal++;
}
else {
ordinal--;
}
if (ordinal <= 0) {
ordinal = 1;
}
if (max > 0) {
if (ordinal > max) {
ordinal = 1;
}
}
MicroModal.show('modal-' + ordinal);
}
Links:
<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>
Hi @ghosh sorry it this intentional that modal closes just upon every click inside?
Strange thing is that I may click on the title ("Login") or input label ("Name") as many times as I want and nothing happens, but after a click just between these two, modal closes like if I clicked a close button.
Hi @ghosh sorry it this intentional that modal closes just upon every click inside?
Strange thing is that I may click on the title ("Login") or input label ("Name") as many times as I want and nothing happens, but after a click just between these two, modal closes like if I clicked a close button.
@staleo I experienced the same issue and resolved (worked around it) it by wrapping my content in a <div>
just used it now and it's amazing but would it be possible to move the styling section on the docs page to the top. The section that says no styling at all is provided. i think it'd help alot of people
Very nice script. How can i disable CLOSE MODAL on click inside .modal__container
The problem when clicked on .modal__container and move mouse, and unclick. Then modal close.
@Faq Hmmm. That’s a bit strange. Not sure that JQuery is being used, when I reference:
event.target
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: