html常用的三种系统对话框

最新推荐文章于 2024-07-26 13:52:20 发布

XAIhan

最新推荐文章于 2024-07-26 13:52:20 发布

阅读量5.4k

点赞数 1

分类专栏： js基础引导文章标签：系统对话框 html JavaScript

本文链接：https://blog.csdn.net/weixin_44220680/article/details/97529630

版权

23 篇文章 0 订阅

订阅专栏

本文详细介绍了H5中三种原生对话框的使用方法：alert用于基本弹窗提醒和代码测试；confirm用于获取用户确认，返回布尔值；prompt用于收集用户输入，返回输入内容。随着UI框架的发展，这些原生对话框的使用频率降低，但在特定需求下仍具价值。

摘要由CSDN通过智能技术生成

浏览器可以通过调用系统对话框的方式向用户显示信息，并且进行一些信息的交互。
需要注意的是：
因为调用的系统对话框，所以对话框的样式我们没有办法通过css进行修改。
最常用的有三种：
PS：如今ui框架都会有关于弹窗的ui，现在说的是H5自带的对话框

最常用的一个弹窗方式，多用于进行弹窗提醒以及系统测试。如下：

这是一个最基本的系统对话框
1 弹窗提醒

	alert('这是一个最基本的系统对话框');

2 测试代码

	function a(){
		alert('这是一个最基本的系统对话框');
	}
	this.a();

有时我们无法确认自己写的代码的正确性或者逻辑性。就会用alert进行判断，如果运行之后进行了弹窗，则表明代码正确。

这个弹窗会出现确认和取消两个按钮，通过用户的点击，会返回true或者false的布尔值。

	if (confirm("你是猴子请来的救兵吗？")) {
			alert('俺是');
		} else{
			alert('俺不是');
		}

我们可以通过confirm和alert进行联动，实现交互。如图：
在这里插入图片描述
当点击cancel取消按钮时，

当点击ok按钮时。

这个弹窗的出现会显示一个文本输入框，用来让用户输入内容。
这个方法接收两个参数，第一个参数是你给用户的文本提示，第二个参数是文本输入框的默认值。
他的返回值就是输入框的内容，我们可以通过给函数定义名字来获取返回的内容。
如下：

	var a = prompt("你是猴子请来的救兵吗","你管我");
	aler(a)

在这里插入图片描述
如图，当我点击确定的话，会alert输入框里面的内容。

当我们点击cancel取消的时候，会返回null。

结语：这就是最常用的3中对话框，但是随着科技进步，如今的ui横行，很少会用到了。不过总会遇到稀奇古怪的需求的，比如甲方突然脑子犯抽想要兼容IE6，那你就只能用最原生的代码开发了。

关注

专栏目录