JavaScript中常用的3种弹出提示框(alert、confirm、prompt)

三种提示框

  • alert ()
  • confirm()
  • prompt ()

alert ()

alert()方法是显示一条弹出提示消息和确认按钮的警告框。
需要注意的是 ：alert()是一个阻塞的函数，如果我们不点确认按钮，后面的内容就不会加载出来。

使用方式：

alert("想要提示的文本内容")

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			alert("这是弹出框提示文本")
		</script>
		<title></title>
	</head>
	<body>
		<p>alert是阻塞的函数</p>
		<p>这句话只有在确认弹出框的提示文本后才会显示</p>
	</body>
</html>

效果截图：

confirm()

confirm()方法是显示一个含有指定消息和确认和取消按钮的确认框。
如果点击"确定"返回true，否则返回false。

使用方式：

不接收返回值：

confirm("这样写可以直接显示,不接收返回值。")

接收返回值：

var x;
var r=confirm("请按下按钮!");
if (r==true){
	x="你按下的是\"确定\"按钮。";
}
else{
	x="你按下的是\"取消\"按钮。";
}
document.write(x)

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			// 使用方式一
			confirm("这样写可以直接显示,不接收返回值。")

			// 使用方式二
			var x;
			var r=confirm("请按下按钮!");
			if (r==true){
				x="你按下的是\"确定\"按钮。";
			}
			else{
				x="你按下的是\"取消\"按钮。";
			}
			document.write(x)
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>

效果截图：

prompt ()

prompt()方法是显示提示用户进行输入的对话框。
这个方法返回的是用户输入的字符串。

使用方式：

不显示默认文本：

prompt("开心吗?"); // 这个显示内容也可以不写，但就没有交互的意义了。

显示默认文本：

var x;
var name=prompt("请输入你的名字","Keafmd");
if (name!=null && person!=""){
 x="你好! " + name + "。";
 document.write(x)
}

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			//方式一
			prompt("开心吗?"); // 这个显示内容也可以不写，但就没有交互的意义了。

			//方式二
			var x;
			var name=prompt("请输入你的名字","Keafmd"); //显示默认文本 "Keafmd"
			if (name!=null && name!=""){
			 x="你好! " + name + "。";
			 document.write(x)
			}
		</script>
		<title></title>
	</head>
	<body>
	</body>
</html>

效果截图：

总结

到此这篇关于JavaScript中常用的3种弹出提示框(alert、confirm、prompt)的文章就介绍到这了,更多相关js弹出提示框(alert、confirm、prompt)内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)

    1.警告框alert() 复制代码 代码如下: alert("欢迎光临!"); 2.信息框confirm(),有取消,确定按钮 复制代码 代码如下: if (confirm("你同意吗?")) { alert("同意"); } else { alert("不同意"); } 3.提示框prompt(),用于提示用户输入一些文本 复制代码 代码如下: var result = prompt("您尊姓大名?",&

  • JS中confirm,alert,prompt函数使用区别分析

    window.alert:参数,只有一个,显示警告框的信息; 无返回值. <script> window.alert("确定.") </script> window.confirm : 参数就只有一个.显示提示框的信息. 按确定,返回true; 按取消返回false. <script> var bln = window.confirm("确定吗?"); alert(bln) </script> window.promp

  • JS中confirm,alert,prompt函数区别分析

    window.alert:参数,只有一个,显示警告框的信息; 无返回值. <script> window.alert("确定.") </script> window.confirm : 参数就只有一个.显示提示框的信息. 按确定,返回true; 按取消返回false. <script> var bln = window.confirm("确定吗?"); alert(bln) </script> window.promp

  • javascript中常见的3种信息提示框(alert,prompt,confirm)

    1.警告提示框 alert("文本"). ex. function disp_alert() { alert("我是警告框!!"+'\n'+"hhah")//有折行 } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 2.确认提示框(confirm,返回true或者false) function show_confirm() { var r=confirm("Press a button!"); if (r==tr

  • JavaScript中常用的3种弹出提示框(alert、confirm、prompt)

    三种提示框 alert () confirm() prompt () alert () alert()方法是显示一条弹出提示消息和确认按钮的警告框. 需要注意的是 :alert()是一个阻塞的函数,如果我们不点确认按钮,后面的内容就不会加载出来. 使用方式: alert("想要提示的文本内容") 样例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <

  • Asp.Net中避免重复提交和弹出提示框的实例代码

    前台代码: <asp:Button ID="Button1" runat="server" Text="打印" onclick="Button1_Click" OnClientClick="this.value='数据提交中--';this.disabled=true;" UseSubmitBehavior="False" /> 后台代码: public partial cl

  • javascript 中的console.log和弹出窗口alert

    主要是方便你调式javascript用的.你可以看到你在页面中输出的内容. 相比alert他的优点是: 1.他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是console能看到对象的内容. 2.console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作. 3.onsole里面的内容非常丰富,你可以在控制台输入:console,然后就可看到: Console {memory: Memo

  • JavaScript中常用的几种字符串方法汇总（新手必看）

    JavaScript中常用的几种字符串方法汇总（新手必看）

    JavaScript常用的几种字符串方法 字符串是一种只读数据,只能查 常用的几种字符串方法: 1.charAt:根据指定的下标获取到对应的字符; 2.charCodeAt:根据指定的下标获取到字符对应的阿斯克码:(底部有ASCII对照表) ps:通过阿斯克码获取到字符: 3.substring:截取字符串: 4.substr:截取字符串: 5.slice:截取字符串: 6.indexOf:查找字符/子字符串在大字符串中第一次出现的位置,找到了返回下标,找不到返回-1: 7.lastIndexO

  • JavaScript基础教程之alert弹出提示框实例

    JavaScript基础教程之alert弹出提示框实例

    alert 命令弹出一个提示框 为便于对 JavaScript 有一个直观的认识,本节会提供几个简单的实例供 JavaScript 入门学习之用.下面的代码是一个弹出提示框的例子: 复制代码 代码如下: <script type="text/javascript"> alert("我是提示文字!"); </script> 将上面部分代码,用文本编辑器(如写字板或其他更高级的编辑器,如 EditPlus 等)保存为 alert.html(或 a

  • JS实现刷新父页面不弹出提示框的方法

    本文实例讲述了JS实现刷新父页面不弹出提示框的方法.分享给大家供大家参考,具体如下: A页面 open方式出 B页面 ,当B页面做了类如保存动作后,需要关闭B页面,刷新A页面的情况下,会弹出一个提示框,要求点重试,这个就是发生预料之外的情况,用户体验很差. 解决方案分两种情况: 1.A页面很简单的情况(没有frame/iframe) 在B页面中的function中: function close(){ window.opener.location.reload(); window.opener

  • php弹出提示框的是实例写法

    php中弹出对话框的方法如下,一般,在提交信息后需要弹出对话框提示,之后可以自动关闭对话框,弹出对话框有下面集中方法,其实都是利用javascript中的alert()方法.提示结束后关闭当前页,同样可以用javascript的Window.self.close()来实现. 确切语句如: echo " <script> window.self.close(); </script> "; 1. php弹出对话框 //弹出对话框 <?php echo &quo

  • js右下角弹出提示框示例代码

    js右下角弹出提示框示例代码

    本文实例讲解了网页右下角弹出广告信息框实例代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>网页右下角的信息框</title> </head> <style type="text/css"> #winpop { width:200px;

  • JS+CSS实现可拖动的弹出提示框

    本文实例讲述了JS+CSS实现可拖动的弹出提示框.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

  • jquery右下角弹出提示框示例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

随机推荐