154 lines
3.2 KiB
HTML
Executable file
154 lines
3.2 KiB
HTML
Executable file
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<style>
|
||
html, body {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
#prompt-form {
|
||
display: inline-block;
|
||
padding: 5px 5px 5px 70px;
|
||
width: 200px;
|
||
border: 1px solid black;
|
||
background: white url(https://js.cx/clipart/prompt.png) no-repeat left 5px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
#prompt-form-container {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 9999;
|
||
display: none;
|
||
width: 100%;
|
||
height: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
#prompt-form-container:before {
|
||
display: inline-block;
|
||
height: 100%;
|
||
content: '';
|
||
vertical-align: middle;
|
||
}
|
||
|
||
#cover-div {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 9000;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: gray;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
#prompt-form input[name="text"] {
|
||
display: block;
|
||
margin: 5px;
|
||
width: 180px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body style="height:3000px">
|
||
|
||
<h1>Нажмите на кнопку ниже</h1>
|
||
|
||
<input type="button" value="Нажмите для показа формы ввода" id="show-button">
|
||
|
||
|
||
<div id="prompt-form-container">
|
||
<form id="prompt-form">
|
||
<div id="prompt-message"></div>
|
||
<input name="text" type="text">
|
||
<input type="submit" value="Ок">
|
||
<input type="button" name="cancel" value="Отмена">
|
||
</form>
|
||
</div>
|
||
|
||
<script>
|
||
|
||
/* Показать полупрозрачный DIV, затеняющий всю страницу
|
||
(а форма будет не в нем, а рядом с ним, чтобы не полупрозрачная) */
|
||
function showCover() {
|
||
var coverDiv = document.createElement('div');
|
||
coverDiv.id = 'cover-div';
|
||
document.body.appendChild(coverDiv);
|
||
}
|
||
|
||
function hideCover() {
|
||
document.body.removeChild(document.getElementById('cover-div'));
|
||
}
|
||
|
||
function showPrompt(text, callback) {
|
||
showCover();
|
||
var form = document.getElementById('prompt-form');
|
||
var container = document.getElementById('prompt-form-container');
|
||
document.getElementById('prompt-message').innerHTML = text;
|
||
form.elements.text.value = '';
|
||
|
||
function complete(value) {
|
||
hideCover();
|
||
container.style.display = 'none';
|
||
document.onkeydown = null;
|
||
callback(value);
|
||
}
|
||
|
||
form.onsubmit = function() {
|
||
var value = form.elements.text.value;
|
||
if (value == '') return false; // игнорировать пустой submit
|
||
|
||
complete(value);
|
||
return false;
|
||
};
|
||
|
||
form.elements.cancel.onclick = function() {
|
||
complete(null);
|
||
};
|
||
|
||
document.onkeydown = function(e) {
|
||
if (e.keyCode == 27) { // escape
|
||
complete(null);
|
||
}
|
||
};
|
||
|
||
var lastElem = form.elements[form.elements.length-1];
|
||
var firstElem = form.elements[0];
|
||
|
||
lastElem.onkeydown = function(e) {
|
||
if (e.keyCode == 9 && !e.shiftKey) {
|
||
firstElem.focus();
|
||
return false;
|
||
}
|
||
};
|
||
|
||
firstElem.onkeydown = function(e) {
|
||
if (e.keyCode == 9 && e.shiftKey) {
|
||
lastElem.focus();
|
||
return false;
|
||
}
|
||
};
|
||
|
||
|
||
container.style.display = 'block';
|
||
form.elements.text.focus();
|
||
}
|
||
|
||
document.getElementById('show-button').onclick = function() {
|
||
showPrompt("Введите что-нибудь<br>...умное :)", function(value) {
|
||
alert("Вы ввели: " + value);
|
||
});
|
||
};
|
||
|
||
</script>
|
||
|
||
|
||
|
||
</body>
|
||
</html>
|
||
|