普通警告弹出框:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo_alert</title>
</head>
<head>
<meta charset="utf-8">
<script>
function myFunction(){
alert("弹出框");//最基本弹出框
}
</script>
</head>
<body>
<input type="button" οnclick="myFunction()" value="显示警告框" />
</body>
</html>
带取消按钮的弹出框
<!DOCTYPE html>//带确定取消按钮的弹出框
<html>
<head>
<meta charset="utf-8">
<title>demo_confirm(runoob.com)</title>
</head>
<body>
<h1>我的网页</h1>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function clickAlert(){
var x;
var r = confirm("确定吗?");//返回按钮选项
if(r)
x="确定";
else
x="取消";
element = document.getElementById("demo");
element.innerHTML = x;
}
</script>
<input type="button" οnclick="clickAlert()"value="按下按钮"/>
<p id="demo"></p>
</body>
</html>
带输入框的弹出框:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo_prompt</title>
</head>
<body>
<p>点击按钮查看输入的对话框。</p>
<button οnclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var ret=prompt("请输入","默认文本");//输入框内容直接返回
if (ret!=null && ret!=""){
x="你输入了" + ret;
document.getElementById("demo").innerHTML=x;
}
}
</script>
</body>
</html>