` to the `dialog` tag.
If you need to close it, add `class="js-modal-close"` on an element in the modal content, it will trigger a click on close button.
Remember there are some demos, it will be easier to understand: Demo of accessible modal window
The script is launched when the page is loaded. If you need to execute it on AJAX-inserted content, you may use for example on `your modal launcher source
`:
```van11yAccessibleModalWindowAria(document.getElementById('newContent')[, addListeners]);```
addListeners
is a facultative boolean (by default set to true
) to add modal listeners (should be set up only the first time in most of the cases).
## Minimal styling classes
Here is the minimal set of styles needed to make it work (without data-modal-prefix-class attribute):
```css
/* needed for old browsers */
dialog {
display: block;
border: 0;
}
/* removes scroll when modal is opened */
.no-scroll {
overflow: hidden;
}
/* overlay covers everything */
.modal-overlay {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 666;
}
/* modal */
.modal {
position: fixed;
left: 25%;
right: auto;
top: 15%;
width: 50%;
background: #fff;
z-index: 667;
}
```
## Styling classes example
Here are the styles (unprefixed) used for the demo, I’ve used data-modal-prefix-class="simple"
and data-modal-prefix-class="simple-animated"
to namespace elements, so each one will start with .simple-
/.simple-animated-
:
```css
dialog {
display: block;
border: 0;
}
/* removes scroll when modal is opened */
.no-scroll {
overflow: hidden;
}
/* overlay covers everything */
.simple-modal-overlay,
.simple-animated-modal-overlay {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: #fff;
opacity: .8;
z-index: 666;
cursor: pointer;
}
.simple-modal-overlay[data-background-click="disabled"],
.simple-animated-modal-overlay[data-background-click="disabled"] {
cursor: auto;
}
.simple-animated-modal-overlay {
animation: fadewhite ease .5s 1 normal ;
}
@keyframes fadewhite {
0% {
opacity: 0;
}
100% {
opacity: .8;
}
}
/* modal */
.simple-modal,
.simple-animated-modal {
position: fixed;
left: 15%;
top: 5%;
width: 70%;
max-height: 98vh;
border: 2px solid #000;
background: #fff;
z-index: 667;
padding: 2em;
right: auto;
overflow: auto;
}
.simple-modal-close,
.simple-animated-modal-close {
float: right;
background: #128197;
border-radius: 1em;
color: #fff;
border: 0;
font: inherit;
padding: .25em .5em;
cursor: pointer;
}
.simple-modal-close:focus,
.simple-modal-close:hover,
.simple-modal-close:active {
outline: 1px dotted #fff;
}
.simple-modal-close:hover,
.simple-modal-close:active {
background: #4d287f;
}
.simple-animated-modal {
animation: apparition ease .5s 1 normal ;
}
@keyframes apparition {
0% {
opacity: 0;
max-height: 0;
width: 0;
left: 50%;
}
100% {
opacity: 1;
max-height: 100%;
width: 70%;
left: 15%;
}
}
/* it can be easily adapted in media-queries for tablets/mobile */
/* for this example: tablets */
@media (max-width: 55.625em) {
.simple-modal,
.simple-animated-modal {
left: 5%;
top: 5%;
height: 90%;
width: 90%;
}
}
/* for this example: mobile */
@media (max-width: 44.375em) {
.simple-modal,
.simple-animated-modal {
left: 1%;
top: 1%;
width: 98%;
height: 98%;
}
}
```
## Other style example
Here are the styles (unprefixed) used for the third example of the demo, I’ve used data-modal-prefix-class="simple-left"
to namespace elements, so each one will start with .simple-left-
:
```css
/* needed for old browsers */
dialog {
display: block;
border: 0;
}
/* removes scroll when modal is opened */
.no-scroll {
overflow: hidden;
}
/* another modal styling example */
/* tooltip modal for it’s easy button */
.simple-left-modal-overlay {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: #fff;
opacity: .8;
z-index: 666;
cursor: pointer;
}
.simple-left-modal-overlay[data-background-click="disabled"] {
cursor: auto;
}
.simple-left-modal-overlay {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(0, 0, 0, .8);
opacity: .8;
z-index: 666;
cursor: pointer;
}
.simple-left-modal {
left: auto;
right: 0;
top: 0;
bottom: 0;
height: 100%;
z-index: 667;
position: fixed;
width: 40em;
max-width: 100%;
padding: 0 1em 1em 1em;
font-size: 1em;
border: 0;
overflow: auto;
background-color: #aaa ; /* fallback CSS IE9 */
background-image:
-webkit-linear-gradient(
top,
#128197 3em,
#f7f7f7 3em
); background-image:
linear-gradient(
to bottom,
#128197 3em,
#f7f7f7 3em
);
background-attachment: local;
}
.simple-left-modal-close {
position: absolute;
top: .5em;
right: 0;
background: transparent;
color: #fff;
border: 0;
cursor: pointer;
}
.simple-left-modal-title {
color: #fff;
font-size: 1.5em;
}
```