Создайте при помощи HTML/CSS форму для логина в модальном окне.
Требования:
- Кнопки окна вне формы не работают (даже на левый край нажать нельзя).
- Полупрозрачный голубой «экран» остстоит от границ на
20px. - Форма центрирована вертикально и горизонтально, её размеры фиксированы.
- Посетитель может менять размер окна браузера, геометрия должна сохраняться.
- Не ломается при прокрутке.
Браузеры: все основные, IE8+.
Исходный документ: tutorial/browser/css/modal-login-src/index.html.
Структура решения
Решение
Структура решения
Шаги решения:
-
Для того, чтобы элементы окна не работали, их нужно перекрыть
DIV'омс большимz-index. - Внутри него будет лежать «экран» с полупрозрачностью. Чтобы он растягивался, можно дать ему
position: absoluteи указать все координатыtop/left/right/bottom. Это работает в IE8+. - Форму можно отцентрировать при помощи
marginилиdisplay: table-cell+vertical-alignmentна внешнемDIV.
Решение
#458