ACCESSIBLE-MINIMODAL EXAMPLES

https://github.com/imhvost/accessible-minimodal

HTML

Base Example with use style, hash and multiple

const Modal = new AccessibleMinimodal({
  animationDuration: 2000,
  style: {
    use: true
  },
  hash: {
    open: true,
    add: true,
    remove: true
  },
  multiple: {
    use: true
  }
});
Open Modal by Hash

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'
  }
});