弹出提示框一般有3种
1)alert (普通提示框)
2)prompt (可输入的提示框)
3)confirm (可选择的提示框)
下面举个例子:
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="mal()">第一种:alert</button>
<button onclick="mpro()">第二种:prompt</button>
<button onclick="mcon()">第三种:confirm</button>
<script>
function mal(){
alert('这是一个普通的提示框')
}
function mpro(){
var val = prompt('这是一个可输入的提示框','这个参数为输入框默认值,可以不填哦')
//prompt会把输入框的值返回给你
}
function mcon(){
var boo = confirm('这是一个可选择的提示框,3种提示方式,学会了吗?')
//confirm 会返回你选择的选项,然后可以依据选择执行逻辑
if(boo){
alert('学会了,真聪明')
}else{
alert('再来一遍吧')
}
}
</script>
</body>
</html>
表单的位置大小需要你用CSS设计。以下代码只是实现了你要的弹出功能。
<!DOCTYPE html><html>
<head>
<title>HTML模板</title>
<meta charset="UTF-8"/>
<style type="text/css">
form{
position:absolute
left:100px
top:50px
width:400px
height:300px
border:1px solid #aaaaaa
}
</style>
<script>
var t
function closeForm(){
var form=document.getElementById("form")
form.style.display="none"
}
function showForm(){
var form=document.getElementById("form")
form.style.display="block"
window.clearTimeout(t)
}
function timer(){
t=window.setTimeout(showForm,10000)
}
</script>
</head>
<body onload="timer()">
<form id="form" style="display:none">
<input type="text"/>
<input type="button" value="关闭" onclick="closeForm()"/>
</form>
</body>
</html>
