提到弹出框,首先想到的alert()了,其次想到的也还是alert(),其实在js中有三种弹出框,下面我们一一说明。


1,仅确定。

 即:对话框界面上只有确定按钮。该功能可以使用alert()方法实现。

代码:

<script language="javascript">//alert弹出框实例alert("Hello Everyone!");alert("Bye!");</script>

结果:

JavaScript弹出框-编程知识网


点击确定后:

JavaScript弹出框-编程知识网


总结:

1,js中每个alert()语句都会弹出一个对话框,不覆盖。

2,对话框是由浏览器产生的,js语句只是触发其发生而已。因此不同浏览器的弹出框样式会有所差别。

2,确定和取消

即:对话框界面上有确定和取消,用confirm()实现

代码:

<script language="javascript">//confirm弹出框实例confirm("confirm 弹出框");</script>

结果:


JavaScript弹出框-编程知识网

这里需要注意:无论我们点击确定还是取消,弹出框都会关闭,不同的是我们点击确定,confirm()返回true,否则返回false。

下面我们用代码展示:

代码:

<script language="javascript">//confirm弹出框实例var conf=confirm("confirm 弹出框 请选择确定或取消");//显示用户选择的confirmif(conf==true){alert("您选择了:确定");}else {alert("您选择了:取消")}
</script>

结果:


JavaScript弹出框-编程知识网



点击确定后:

JavaScript弹出框-编程知识网



3,允许输入内容

界面显示文本框,用户可输入,用prompt()实现

代码:

<script language="javascript">//prompt弹出框实例var name=prompt("请输入您的名字:");//弹出用户输入的信息;alert(name);
</script>

结果:

JavaScript弹出框-编程知识网

点击确定后:

JavaScript弹出框-编程知识网

点击取消后:

JavaScript弹出框-编程知识网

三种样式的弹出框是最基本的,也是最简单的,根据不同情况选择使用哪种。