بازگشت به درس
این محتوا تنها در این زبان‌ها موجود است: English, Español, Français, Italiano, 日本語, Русский, Українська, 简体中文. لطفاً به ما

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.

باز کردن راه‌حل درون sandbox.