540 B
540 B
A modal window can be implemented using a half-transparent <div id="cover-div">
that covers the whole window, like this:
#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
.