JavaScript中的三种弹窗方式
程序员文章站
2022-05-07 21:43:44
...
JavaScript中的三种弹窗方式
1.只是含有确认按钮的弹框
function demo1(){
//只是含有确认按钮的弹框
window.alert("好好学习，天天向上");
}
效果测试
2.含有确认和取消按钮的弹框
function demo2(){
//含有确认和取消按钮的弹框
var flag= window.confirm("是否删除？");
alert(flag);
}
其中Var falg接收用户的布尔类型返回值
测试结果如下
当用户点击确定按钮时：
点击取消按钮时
3.可以输入内容的弹窗
function demo3(){
//含有输入内容的弹框
var v= window.prompt("请输入昵称","例如：李白");
alert(v);
}
测试结果如下：
重新指定输入文本为张飞
返回结果为：
完整网页代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*三种弹框方式*/
function demo1(){
//只是含有确认按钮的弹框
window.alert("好好学习，天天向上");
}
function demo2(){
//含有确认和取消按钮的弹框
var flag= window.confirm("是否删除？");
alert(flag);
}
function demo3(){
//含有输入内容的弹框
var v= window.prompt("请输入昵称","例如：李白");
alert(v);
}
</script>
</head>
<body>
<input type="button" name="" id="" value="弹框一" onclick="demo1()" />
<input type="button" name="" id="" value="弹框二" onclick="demo2()" />
<input type="button" name="" id="" value="弹框三" onclick="demo3()" />
</body>
</html>