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

alert

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

html html5 提示窗口 html怎么弹出对话框_文本输入框


1 弹窗提醒

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

2 测试代码

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

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

confirm

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

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

我们可以通过confirm和alert进行联动,实现交互。如图:

html html5 提示窗口 html怎么弹出对话框_JavaScript_02


当点击cancel取消按钮时,

html html5 提示窗口 html怎么弹出对话框_html_03


当点击ok按钮时。

html html5 提示窗口 html怎么弹出对话框_html html5 提示窗口_04

prompt

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

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

html html5 提示窗口 html怎么弹出对话框_文本输入框_05


如图,当我点击确定的话,会alert输入框里面的内容。

html html5 提示窗口 html怎么弹出对话框_JavaScript_06


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

html html5 提示窗口 html怎么弹出对话框_JavaScript_07

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