94 lines
No EOL
1.9 KiB
HTML
94 lines
No EOL
1.9 KiB
HTML
<!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> |