Last active
June 4, 2020 19:18
-
-
Save hijonathan/48eb73fde105e17aacbf76c775e3d3c4 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function(w, doc) { | |
const cookieKey = 'your_cookie'; | |
let hasCookie = doc.cookie.split(';').filter((c) => { | |
let [k, _v] = c.split('='); | |
return k == cookieKey; | |
}).length > 0; | |
if (!hasCookie) { | |
let scriptEl = doc.createElement('script'); | |
scriptEl.src = 'https://cdn.jsdelivr.net/npm/micromodal/dist/micromodal.min.js'; | |
scriptEl.onload = () => { | |
if (w.MicroModal != null) { | |
let modalEl = createModal(); | |
let styleEl = createCSS(); | |
// Append elements to the page. | |
doc.body.appendChild(modalEl); | |
doc.head.appendChild(styleEl); | |
// Initialize and show the modal. | |
w.MicroModal.init({ | |
onShow: (modal) => { | |
// Set the cookie so we don't see this again. | |
doc.cookie = `${cookieKey}=true`; | |
}, | |
onClose: (modal) => { | |
// Remove everything to avoid poluting CSS/JS on the page. | |
modalEl.remove(); | |
styleEl.remove(); | |
scriptEl.remove(); | |
} | |
}) | |
} | |
} | |
doc.body.appendChild(scriptEl); | |
} | |
function createModal() { | |
return doc.createRange().createContextualFragment(` | |
<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> | |
`); | |
} | |
function createCSS() { | |
let style = doc.createElement('style'); | |
style.type = 'text/css'; | |
let 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; | |
} | |
`; | |
if (style.styleSheet) { | |
style.styleSheet.cssText = styles; | |
} else { | |
style.appendChild(doc.createTextNode(styles)); | |
}; | |
return style; | |
} | |
})(window, window.document); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment