Window对象提示框、确认框、输入框、弹窗详解

Myth丶恋晨 2022-10-29 07:52 462阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 背景
 *  2. alert提示框
 *  3. confirm确认框
 *  4. prompt输入框
 *  5. showModalDialog弹窗
 *  6. 小结

# 1. 背景 #

Window对象即浏览器窗口对象，提供了很多实用的属性和方法，也包含多种交互的对话框。

一般开发人员习惯上使用UI框架提供的弹窗，能够提供更加精美的样式，而且在各个浏览器下表现一致。

其实Window对象自带的对话框功能还算比较丰富，也算是一种可行的选择，本篇就来具体了解下。

# 2. alert提示框 #

window.alert方法用来显示一个提示框，该方法没有返回值，注意弹窗后脚本将被阻塞，直到用户点击确定后才执行后面的脚本。

<button type="button" onclick="alertClick()">alert</button>
        <script>
            function alertClick() {
          
                alert("你好");
            }
        </script>

效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]

# 3. confirm确认框 #

window.confirm用于弹出一个确认框，同样会阻塞后面的脚本执行，直到点击确认后者取消。

confirm方法会返回布尔值，表示用户点击的结果，代码如下：

<button type="button" onclick="confirmClick()">confirmClick</button>
        <script>
            function confirmClick() {
          
                var result = confirm("您确认要删除吗，一旦删除不可恢复");
                alert("选择结果：" + result);
            }
        </script>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70 1]

# 4. prompt输入框 #

prompt输入框可以用来供用户在弹窗中输入一些内容，返回值即为用户输入内容。

<button type="button" onclick="promptClick()">promptClick</button>
        <script>
            function promptClick() {
          
                var result = prompt("请输入姓名", "张三");
                alert("输入内容为:" + result);
            }
        </script>

注意prompt方法的第一个参数表示输入提示，第二个参数为输入的默认值，所以效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 1]  
还有一点，如果点击取消，则返回值为null。

# 5. showModalDialog弹窗 #

showModalDialog可以弹出指定URL的弹窗。

<button type="button" onclick="showModalDialogClick()">showModalDialogClick</button>
        <script>
            function showModalDialogClick() {
          
                showModalDialog("http://www.baidu.com");
            }
        </script>

这个用的比较少，大家知道有这个方法即可。

# 6. 小结 #

其实Window对象提供了非常全面的功能，我们使用的很多前端框架，无非就是在文档对象模型、浏览器对象模型基础上开发的，适当的了解Window和Document对象的功能及方法，能够加深我们对浏览器的理解。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/9a17ed47222b4eb48702537dc87cc321.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70]: /images/20221024/dbb6d79173dd40bc988335c303c9017c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70 1]: /images/20221024/5c8ac7c2b8254a7dad0369916047cbcb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221024/a25a71ae69c8467baa7c66b6beed4aee.png