renovations

2015-03-07 19:26:10 +03:00 · 2015-03-07 19:26:10 +03:00 · 6ac9e3a500
commit 6ac9e3a500
parent dceccedb58
182 changed files with 275 additions and 324 deletions
--- a/8-css-for-js/6-css-center/2-form-modal/solution.view/index.html
+++ b/8-css-for-js/6-css-center/2-form-modal/solution.view/index.html
@ -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>