jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-03-07 19:26:10 +03:00
parent dceccedb58
commit 6ac9e3a500
182 changed files with 275 additions and 324 deletions
Download patch file Download diff file Expand all files Collapse all files

11
8-css-for-js/6-css-center/2-form-modal/solution.md Normal file
View file

@ -0,0 +1,11 @@
# Структура решения
Шаги решения:
<ol><li>
Для того, чтобы элементы окна не работали, их нужно перекрыть `DIV'ом` с большим `z-index`.</li>
<li>Внутри него будет лежать "экран" с полупрозрачностью. Чтобы он растягивался, можно дать ему `position: absolute` и указать все координаты `top/left/right/bottom`. Это работает в IE8+.</li>
<li>Форму можно отцентрировать при помощи `margin` или `display: table-cell` + `vertical-align` на внешнем `DIV`.</li>
</ol>
# Решение

69
8-css-for-js/6-css-center/2-form-modal/solution.view/index.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
/* внешний DIV перекрывает всё окно */
#box {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
}
/* в нём находится полупрозрачный экран, на 20px меньше */
#box-inner {
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
background: blue;
opacity: 0.3;
filter: alpha(opacity=30);
}
/* форма находится не в экране, а рядом с ним, чтобы не быть полупрозрачной */
#box form {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0; /* центрирование */
margin: auto; /* центрирование */
height: 120px;
width: 300px;
border: 1px solid black;
padding: 5px 5px 5px 55px;
background: url(https://js.cx/clipart/key.png) 3px 5px white no-repeat;
}
</style>
</head>
<body style="height:2000px">
<p>Текст Текст Текст</p>
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
<p>Текст Текст Текст</p>
<div id="box">
<div id="box-inner">
</div>
<form>
Добро пожаловать!
<table>
<tr><td>Логин</td><td><input></td></tr>
<tr><td>Пароль</td><td><input></td></tr>
<tr><td colspan="2"><input type="submit" value="Войти"></td></tr>
</table>
</form>
</div>
</body>
</html>

18
8-css-for-js/6-css-center/2-form-modal/source.view/index.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body style="height:2000px">
<p>Текст Текст Текст</p>
<button onclick="alert('Эта кнопка не должна работать')">Эта кнопка не работает</button>
<p>Текст Текст Текст</p>
<img src="https://js.cx/clipart/key.png"/>
</body>
</html>

23
8-css-for-js/6-css-center/2-form-modal/task.md Normal file
View file

@ -0,0 +1,23 @@
# Форма + модальное окно
[importance 5]
Создайте при помощи HTML/CSS форму для логина в модальном окне.
[iframe height=280 src="solution" border=1 link]
Требования:
<ul>
<li>Кнопки окна вне формы не работают (даже на левый край нажать нельзя).</li>
<li>Полупрозрачный голубой "экран" отстоит от границ на `20px`.</li>
<li>Форма центрирована вертикально и горизонтально, её размеры фиксированы.</li>
<li>Посетитель может менять размер окна браузера, геометрия должна сохраняться.</li>
<li>Не ломается при прокрутке.</li>
</ul>
Браузеры: все основные, IE8+.