JavaScript弹出框

忘是亡心i 2021-10-13 04:17 566阅读 0赞

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

# 1，仅确定。 #

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

代码：

结果：

![SouthEast][]

点击确定后：

![SouthEast 1][]

总结：

1，js中每个alert（）语句都会弹出一个对话框，不覆盖。

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

# 2，确定和取消 #

即:对话框界面上有确定和取消，用confirm（）实现

代码：

结果：

![SouthEast 2][]

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

下面我们用代码展示：

代码：

结果：

![SouthEast 3][]

点击确定后：

![SouthEast 4][]

# 3，允许输入内容 #

界面显示文本框，用户可输入，用prompt（）实现

代码：

结果：

![SouthEast 5][]

点击确定后：

![SouthEast 6][]

点击取消后：

![SouthEast 7][]

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

[SouthEast]: /images/20211013/84df78e979604aab871651933083009c.png
[SouthEast 1]: /images/20211013/5464201e6a8d420495ff97c66b1751e4.png
[SouthEast 2]: /images/20211013/b27787f5998d4ff9acbfadf8a62cf625.png
[SouthEast 3]: /images/20211013/1af18378ce4e4bd8aebf4c77d35be34e.png
[SouthEast 4]: /images/20211013/59fb03983301401b9a66a89303668eea.png
[SouthEast 5]: /images/20211013/e9d57817392b4b80b6d28b3ab765620f.png
[SouthEast 6]: /images/20211013/e8c638e2dcd84cce871e33bb281d3a7e.png
[SouthEast 7]: /images/20211013/901d50114fbf4c5fb5c3bb323dc2a537.png