<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body style="height:3000px">
<h2>Click the button below</h2>
<input type="button" value="Click to show the form" 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="Ok">
<input type="button" name="cancel" value="Cancel">
</form>
</div>
<script>
function showCover() {
let coverDiv = document.createElement('div');
coverDiv.id = 'cover-div';
document.body.style.overflowY = 'hidden';
document.body.append(coverDiv);
}
function hideCover(){
document.getElementById('cover-div').remove();
document.body.style.overflowY = '';
}
function showPrompt(text, callback){
showCover();
let form = document.getElementById('prompt-form');
let container = document.getElementById('prompt-form-container');
document.getElementById('prompt-message').innerHTML = text;
form.text.value = '';
function complete(value){
hideCover();
container.style.display='none';
document.onkeydown = null;
callback(value); //call back is alert() here
}
form.onsubmit = function() {
//if the promptor passes ok
let value = form.text.value;
if(value == '') return false; // ignore empty submit
complete(value);
return false;
};
form.cancel.onclick = function(){
complete(null);
};
document.onkeydown = function(e) {
if(e.key == 'Escape') {//if escape key was pressed
complete(null);
}
};
let lastElem = form.elements[form.elements.length - 1];
let firstElem = form.elements[0];
lastElem.onkeydown = function(e) {
if (e.key == 'Tab' && !e.shiftKey) {
firstElem.focus();
return false;
}
};
firstElem.onkeydown = function(e) {
if (e.key == 'Tab' && e.shiftKey) {
lastElem.focus();
return false;
}
};
container.style.display = 'block';
form.elements.text.focus();
}
document.getElementById('show-button').onclick = function() {
showPrompt("Enter something<br>...smart :)", function(value) {
alert("You entered: " + value);
});
};
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body style="height:3000px">
<h2>Click the button below</h2>
<input type="button" value="Click to show the form" 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="Ok">
<input type="button" name="cancel" value="Cancel">
</form>
</div>
<script>
function showCover() {
let coverDiv = document.createElement('div');
coverDiv.id = 'cover-div';
document.body.style.overflowY = 'hidden';
document.body.append(coverDiv);
}
function hideCover(){
document.getElementById('cover-div').remove();
document.body.style.overflowY = '';
}
function showPrompt(text, callback){
showCover();
let form = document.getElementById('prompt-form');
let container = document.getElementById('prompt-form-container');
document.getElementById('prompt-message').innerHTML = text;
form.text.value = '';
function complete(value){
hideCover();
container.style.display='none';
document.onkeydown = null;
callback(value); //call back is alert() here
}
form.onsubmit = function() {
//if the promptor passes ok
let value = form.text.value;
if(value == '') return false; // ignore empty submit
complete(value);
return false;
};
form.cancel.onclick = function(){
complete(null);
};
document.onkeydown = function(e) {
if(e.key == 'Escape') {//if escape key was pressed
complete(null);
}
};
let lastElem = form.elements[form.elements.length - 1];
let firstElem = form.elements[0];
lastElem.onkeydown = function(e) {
if (e.key == 'Tab' && !e.shiftKey) {
firstElem.focus();
return false;
}
};
firstElem.onkeydown = function(e) {
if (e.key == 'Tab' && e.shiftKey) {
lastElem.focus();
return false;
}
};
container.style.display = 'block';
form.elements.text.focus();
}
document.getElementById('show-button').onclick = function() {
showPrompt("Enter something<br>...smart :)", function(value) {
alert("You entered: " + value);
});
};
</script>
</body>
</html>
댓글
댓글 쓰기