en.javascript.info/02-ui/04-forms-controls/04-forms-submit/01-modal-dialog/solution.md
Ilya Kantor f301cb744d init
2014-10-26 22:10:13 +03:00

879 B
Raw Blame History

HTML/CSS для формы: [edit src="solution"/]

Модальное окно делается путём добавления к документу DIV, полностью перекрывающего документ и имеющего больший z-index.

В результате все клики будут доставаться этому DIV'у:

Стиль:

#cover-div {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.3;
  filter: alpha(opacity=30);
}

Самой форме нужно, естественно, дать еще больший z-index, чтобы она была над DIV'ом. Мы не помещаем форму в контейнер, чтобы она не унаследовала полупрозрачность.

[edit src="solution"/]