浏览器可以通过调用系统对话框的方式向用户显示信息,并且进行一些信息的交互。
需要注意的是:
因为调用的系统对话框,所以对话框的样式我们没有办法通过css进行修改。
最常用的有三种:
PS:如今ui框架都会有关于弹窗的ui,现在说的是H5自带的对话框
alert
最常用的一个弹窗方式,多用于进行弹窗提醒以及系统测试。如下:
1 弹窗提醒
alert('这是一个最基本的系统对话框');
2 测试代码
function a(){
alert('这是一个最基本的系统对话框');
}
this.a();
有时我们无法确认自己写的代码的正确性或者逻辑性。就会用alert进行判断,如果运行之后进行了弹窗,则表明代码正确。
confirm
这个弹窗会出现确认和取消两个按钮,通过用户的点击,会返回true或者false的布尔值。
if (confirm("你是猴子请来的救兵吗?")) {
alert('俺是');
} else{
alert('俺不是');
}
我们可以通过confirm和alert进行联动,实现交互。如图:
当点击cancel取消按钮时,
当点击ok按钮时。
prompt
这个弹窗的出现会显示一个文本输入框,用来让用户输入内容。
这个方法接收两个参数,第一个参数是你给用户的文本提示,第二个参数是文本输入框的默认值。
他的返回值就是输入框的内容,我们可以通过给函数定义名字来获取返回的内容。
如下:
var a = prompt("你是猴子请来的救兵吗","你管我");
aler(a)
如图,当我点击确定的话,会alert输入框里面的内容。
当我们点击cancel取消的时候,会返回null。
结语:这就是最常用的3中对话框,但是随着科技进步,如今的ui横行,很少会用到了。不过总会遇到稀奇古怪的需求的,比如甲方突然脑子犯抽想要兼容IE6,那你就只能用最原生的代码开发了。