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

init

Browse source
This commit is contained in:
Ilya Kantor 2014-10-26 22:10:13 +03:00
parent 06f61d8ce8
commit f301cb744d
2271 changed files with 103162 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
03-more/11-css-for-js/06-css-center/02-form-modal/solution/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"modal-login","plunk":"KyZ561hLR5xlkIOv0JyC"}

69
03-more/11-css-for-js/06-css-center/02-form-modal/solution/index.html Executable 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(http://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>

1
03-more/11-css-for-js/06-css-center/02-form-modal/solution/modal-login/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"modal-login","plunk":"KyZ561hLR5xlkIOv0JyC"}

69
03-more/11-css-for-js/06-css-center/02-form-modal/solution/modal-login/index.html Executable 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(http://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>