Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS backdrop-filter
@keyframes fade-up {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(.8);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
.backdrop-filter-modal {
display: flex;
justify-content: center;
width: 100%;
&[data-overlay='true'] {
&:after {
content: '';
z-index: 101;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba($navy, 0.4);
backdrop-filter: blur(2px);
}
}
&__trigger {
padding: $spacing-sml;
background-color: $navy;
color: $white;
border: none;
cursor: pointer;
}
&__modal {
z-index: 1000;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
max-width: 100vh;
max-height: 80vh;
padding: $spacing-med;
background-color: $white;
box-shadow: $default-box-shadow;
&[data-is-open='true'] {
display: flex;
opacity: 0;
transform: translate(-50%, -50%) scale(.8);
animation: fade-up $transition-timing-fast $transition-easing-cubic forwards;
}
}
}
<div class="backdrop-filter-modal" data-module="examples/backdrop-filter/backdrop-filter-modal/BackdropFilterModal">
<button class="backdrop-filter-modal__trigger" data-trigger>Open modal</button>
<div class="backdrop-filter-modal__modal" data-modal>
<h1>Boo!!!</h1>
<button class="backdrop-filter-modal__trigger" data-close>Woooo, now close!</button>
</div>
</div>
// Constants
const constants = {
attributes: {
DATA_TRIGGER: 'data-trigger',
DATA_MODAL: 'data-modal',
DATA_CLOSE: 'data-close',
DATA_IS_OPEN: 'data-is-open',
DATA_OVERLAY: 'data-overlay'
},
};
class BackdropFilterModal {
constructor(element, options) {
this._element = element;
this._options = options;
this._init();
}
_state = {
isOpen: false
}
/**
* Toggle modal open or closed
*/
_toggleModal() {
this._state.isOpen = !this._state.isOpen;
this._modal.setAttribute(constants.attributes.DATA_IS_OPEN, `${this._state.isOpen}`);
this._element.setAttribute(constants.attributes.DATA_OVERLAY, `${this._state.isOpen}`);
}
/**
* Inititalize all event listeners
*/
_addEventListeners() {
this._trigger.addEventListener('click', this._toggleModal.bind(this));
this._close.addEventListener('click', this._toggleModal.bind(this));
}
/**
* Cache all selectors for further use
*/
_cacheSelectors() {
this._trigger = this._element.querySelector(`[${constants.attributes.DATA_TRIGGER}]`);
this._modal = this._element.querySelector(`[${constants.attributes.DATA_MODAL}]`);
this._close = this._element.querySelector(`[${constants.attributes.DATA_CLOSE}]`);
}
/**
* Inititalize component
*/
_init() {
this._cacheSelectors();
this._addEventListeners();
}
}
export default BackdropFilterModal;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment