en.javascript.info/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md
Ilya Kantor e2443e8de6 ok
2017-03-19 16:59:53 +03:00

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.