Modal with custom CSS, classes and triggers
HTML:
CSS:
.modal-custom {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 666;
}
.modal-custom:not(.active) {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.modal-custom.open,
.modal-custom.close {
transition: opacity 0.4s, visibility 0.4s;
}
.modal-custom.open .modal-custom-body,
.modal-custom.close .modal-custom-body {
transition: transform 0.4s;
}
.modal-custom.active .modal-custom-body {
transform: translateY(0);
}
.modal-custom-wrapp {
width: 100%;
height: 100%;
display: flex;
background: rgba(51, 51, 51, 0.8);
overflow: hidden;
overflow-y: scroll;
outline: none;
padding: 32px 32px 0;
}
.modal-custom-body {
background-color: #fff;
flex: none;
min-height: 1px;
width: 200px;
max-width: 100%;
margin: auto auto 0;
padding: 32px;
transform: translateY(100%);
border-radius:32px 32px 0 0;
}
JS:
const ModalCustom = new AccessibleMinimodal({
classes: {
modal: 'modal-custom',
wrapp: 'modal-custom-wrapp',
body: 'modal-custom-body'
},
triggersAttrs: {
open: 'data-modal-custom-open',
close: 'data-modal-custom-close'
}
});
Modal Content