JavaScript 三种弹窗对话框实现详解
作者:白露时间:2026-10-29 18:56:18浏览:543
本文详细介绍JavaScript中三种常用的弹出对话框实现方法:警告框、确定取消框以及带输入的提示框。通过具体的HTML与JavaScript代码示例,演示alert、confirm和prompt函数的基本用法及交互逻辑,帮助开发者快速掌握前端弹窗功能的实现技巧。
JavaScript 三种弹窗对话框实现详解
本文详细介绍JavaScript中三种常用的弹出对话框实现方法,旨在为读者提供实用的参考代码与解析。
警告框实现
第一种是警告框(Alert Box)。
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("我是警告框!!")
}
</script>
</head>
<body>
<input type="button" onclick="disp_alert()" value="显示警告框" />
</body>
</html>
确定取消框实现
第二种是确定取消框(Confirm Box)。
<html>
<head>
<script type="text/javascript">
function disp_confirm()
{
var r=confirm("按下按钮")
if (r==true)
{
document.write("您按了确认!")
}
else
{
document.write("您按了取消!")
}
}
</script>
</head>
<body>
<input type="button" onclick="disp_confirm()" value="显示确认框" />
</body>
</html>
带输入提示框实现
第三种是带输入的提示框(Prompt Box)。
<html>
<head>
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("请输入您的名字","Bill Gates")
if (name!=null && name!="")
{
document.write("你好!" + name + " 今天过得怎么样?")
}
}
</script>
</head>
<body>
<input type="button" onclick="disp_prompt()" value="显示提示框" />
</body>
</html>
希望本文所述的JavaScript程序设计知识能对读者有所帮助。
作者最新文章
AOS.js 动画不触发怎么办?排查 DOM 加载与移动端兼容问题
2026-11-05 17:02:26
sigma.js 怎么实现节点点击、拖拽与悬停提示交互
2026-11-05 15:03:27
Matter.js 与 PixiJS/Three.js 集成:分离物理计算与渲染
2026-11-05 13:43:48
主流JS弹幕库选型指南:Danmaku.js等库的功能与体积对比
2026-11-05 09:28:19
JavaScript点击事件监听与交互效果实例
2026-11-05 09:10:19
