标签：prompt confirm alert 输入框 Window result 提示框 弹窗

1. 背景

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

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

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

2. alert提示框

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

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

效果：

3. confirm确认框

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

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

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

效果如下：

4. prompt输入框

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

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

注意prompt方法的第一个参数表示输入提示，第二个参数为输入的默认值，所以效果如下：

还有一点，如果点击取消，则返回值为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对象的功能及方法，能够加深我们对浏览器的理解。

标签：prompt,confirm,alert,输入框,Window,result,提示框,弹窗
来源： https://blog.csdn.net/woshisangsang/article/details/113779606

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。