20 lines
540 B
Markdown
20 lines
540 B
Markdown
A modal window can be implemented using a half-transparent `<div id="cover-div">` that covers the whole window, like this:
|
|
|
|
```css
|
|
#cover-div {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 9000;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: gray;
|
|
opacity: 0.3;
|
|
}
|
|
```
|
|
|
|
Because the `<div>` covers everything, it gets all clicks, not the page below it.
|
|
|
|
Also we can prevent page scroll by setting `body.style.overflowY='hidden'`.
|
|
|
|
The form should be not in the `<div>`, but next to it, because we don't want it to have `opacity`.
|