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程序设计知识能对读者有所帮助。

作者最新文章