-
-
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> |
document.addEventListener("DOMContentLoaded", function() {
MicroModal.show('my-modal',{
awaitCloseAnimation: true,
onShow: function(modal){
// do something
},
onClose: function(modal){
// do something
}
});
});
My explanation on how to make it work proper with close animation
Step 1:
Add CSS and HTML examples from the top of the file.
Step 2:
Add this code after script initialization
window.addEventListener('DOMContentLoaded', function(){ MicroModal.init({ onShow: modal => console.info(
${modal.id} is shown), // [1] onClose: modal => console.info(
${modal.id} is hidden), // [2] openTrigger: 'data-micromodal-trigger', // [3] closeTrigger: 'data-micromodal-close', // [4] openClass: 'is-open', // [5] disableScroll: true, // [6] disableFocus: false, // [7] awaitOpenAnimation: true, // [8] awaitCloseAnimation: true, // [9] debugMode: true // [10] }); })
Step 3:
Add element that will trigger modal
<a href="#" data-micromodal-trigger="modal-1">Trigger modal</a>
It can be <a>
or <button>
doesn't matter, depends on what you want.
How to open modal immediately after page load ?
Just add MicroModal.show('your modal id')
To trigger by element watch "Step 3"
Hello everyone, I try to use barba.js to load Ajax, but after loading the page, micromodal doesn't work. Is there a solution?
@yoowo222 Have you tried loading the micromodal without barbs.js? We need to make sure that the micromodal is working without any interference.
I use this to initiate micromodal:
try{
MicroModal.init({
awaitCloseAnimation: true,
onShow: function(modal){
// do something when modal opens
},
onClose: function(modal){
// do something when modal closes
}
});
}
catch(e){
console.log('micromodal error: ',e);
}
You need to place the init code inside:
window.addEventListener('DOMContentLoaded', function(){
});
@charlesr1971 Thank you. I've tried to do it myself. I put it here
afterEnter: (data) => {}
Doesn't work when used with jquery
@joshliptzin I use it with jQuery without any problems…
Is there any css sample for mobile?
@victorrica Here are two examples that work on the mobile:
https://codepen.io/charles1971/pen/qBELEVN
https://codepen.io/charles1971/pen/BayGZBK
If you want to make the modal full width/height on the mobile, then just add 100% to both properties in the CSS
This library is perfect !
Only problem I have is on touch screen when I close the modal it clicks on the element under
So If I click on the close button and there is a link behind the close button it will click on the link too which is not good since that redirects me to the links page..
This work for me.
I install microModal via NPM, and modify the micromodal.js inside the node_module, the line 80.
I change false for true
awaitCloseAnimation = _ref$awaitCloseAnimat === void 0 ? true : _ref$awaitCloseAnimat,
I hope this can help anyone.
I find this library is sample is so useful,
You can easily use this library to change model to slide menu, I shared my example here if anyone interested 😁
I find this library is sample is so useful, You can easily use this library to change model to slide menu, I shared my example here if anyone interested 😁
Very cool! 🙏
For anyone who comes back to this in the future, here's a minimal working example that you can just copy & paste:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>micromodal demo</title>
<style>
.micromodal {
display: none;
}
.micromodal.is-open {
display: block;
}
.micromodal__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.65);
}
.micromodal__container {
box-sizing: border-box;
overflow-y: auto;
max-width: 500px;
max-height: 100vh;
padding: 30px;
background-color: #fff;
border-radius: 4px;
}
.micromodal[aria-hidden="false"] .micromodal__overlay {
animation: microModalFadeIn .2s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.micromodal[aria-hidden="false"] .micromodal__container {
animation: microModalSlideIn .2s cubic-bezier(0, 0, .2, 1);
}
.micromodal .micromodal__container,
.micromodal .micromodal__overlay {
will-change: transform;
}
@keyframes microModalFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes microModalSlideIn {
from { transform: translateY(15%); }
to { transform: translateY(0); }
}
</style>
</head>
<body>
<a data-micromodal-trigger="modal-1" href='javascript:;'>Open Modal Dialog</a>
<div class="micromodal" id="modal-1" aria-hidden="true">
<div class="micromodal__overlay" tabindex="-1" data-micromodal-close>
<div class="micromodal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
<button aria-label="Close modal" data-micromodal-close>X</button>
<p>hi there, I'm some modal content!</p>
</div>
</div>
</div>
<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
<script>
MicroModal.init();
</script>
</body>
</html>
And here's a working codepen of the same code: https://codepen.io/panphora/pen/yLpwOOo
I made a few stylistic choices:
- I removed the exit animation. If people are exiting a modal, they probably just want it gone instantly.
- I cut down on the header content & aria labels there. Useful for some modals, but not every modal has a header.
- I cut down on the number of classes & grouped all the CSS under a .micromodal class. Much easier to read this way.
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;
}
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', () => {
MicroModal.init({
onShow: (modal) => {
debugger;
},
});
});
event.currentTarget
returns null
You need to initialise the modal like:
MicroModal.init({
onShow: modal => console.info(`${modal.id} is shown`), // [1]
onClose: modal => console.info(`${modal.id} 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.
https://micromodal.vercel.app/
I always set:
awaitCloseAnimation: true
So for example:
MicroModal.init({
onShow: function(modal, activeElement, event){
microModalShow(modal, activeElement, event);
}
…
});
function microModalShow(modal, activeElement, event) {
if(modal.id === ‘someModalId’){
console.log('event target data bundle id: ', event.target.getAttribute("data-bundle-id"));
// 1
}
}
thank you @charlesr1971 , but still getting:
Uncaught TypeError: Cannot read properties of undefined (reading 'target')
It might be because of using different jquery version?
jQuery.fn.jquery
'3.4.1'
Your example using:
'3.6.3'
@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:
$('#edit_data_modal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var bundle_id = button.data('bundle_id'); // Extract info from data-* attributes
var modal = $(this);
modal.find('#bundle_id').val(bundle_id);
});
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.
Would be nice to trigger this modal on pageLoad instead of onClick. How do I go about this?