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

简介: 本文目录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>


效果:

image.png

3. confirm确认框

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


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


  <button type="button" onclick="confirmClick()">confirmClick</button>

   <script>

       function confirmClick() {

           var result = confirm("您确认要删除吗,一旦删除不可恢复");

           alert("选择结果:" + result);

       }

   </script>


效果如下:

image.png

image.png

4. prompt输入框

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


<button type="button" onclick="promptClick()">promptClick</button>

   <script>

       function promptClick() {

           var result = prompt("请输入姓名", "张三");

           alert("输入内容为:" + result);

       }

   </script>


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

image.png

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

相关文章
|
XML JSON Java
springboot文件上传,单文件上传和多文件上传,以及数据遍历和回显
本文介绍了在Spring Boot中如何实现文件上传,包括单文件和多文件上传的实现,文件上传的表单页面创建,接收上传文件的Controller层代码编写,以及上传成功后如何在页面上遍历并显示上传的文件。同时,还涉及了`MultipartFile`类的使用和`@RequestPart`注解,以及在`application.properties`中配置文件上传的相关参数。
springboot文件上传,单文件上传和多文件上传,以及数据遍历和回显
|
SQL 安全 Go
【Go语言专栏】Go语言中的安全审计与漏洞修复
【4月更文挑战第30天】本文介绍了Go语言中的安全审计和漏洞修复实践。安全审计包括代码审查、静态分析、运行时分析、渗透测试和专业服务,借助工具如`go vet`、`staticcheck`、`gosec`等。修复漏洞的方法涉及防止SQL注入、XSS攻击、CSRF、不安全反序列化等。遵循最小权限原则、输入验证等最佳实践,结合持续学习,可提升Go应用安全性。参考[Go安全工作组](https://github.com/golang/security)和[OWASP Top 10](https://owasp.org/www-project-top-ten/)深入学习。
618 0
|
前端开发 JavaScript 编译器
不走弯路,纯前端如何把图片导出成视频!
【10月更文挑战第3天】不走弯路,纯前端如何把图片导出成视频!
1011 3
|
存储 缓存 Java
在Spring Boot中使用缓存的技术解析
通过利用Spring Boot中的缓存支持,开发者可以轻松地实现高效和可扩展的缓存策略,进而提升应用的性能和用户体验。Spring Boot的声明式缓存抽象和对多种缓存技术的支持,使得集成和使用缓存变得前所未有的简单。无论是在开发新应用还是优化现有应用,合理地使用缓存都是提高性能的有效手段。
537 1
|
人工智能 JSON API
|
存储 索引 Python
元组和列表的区别?
【7月更文挑战第13天】元组和列表的区别?
1833 6
|
存储 Java
Java中带返回值方法的定义与调用技术
Java中带返回值方法的定义与调用技术
357 1
|
JavaScript
vue3 中借助 tsx 使用 JSX (以实现字体下拉选择为例)
vue3 中借助 tsx 使用 JSX (以实现字体下拉选择为例)
314 0
|
运维 Linux 数据安全/隐私保护
Softether详解(三)——Softether管理端安装与设置
Softether详解(三)——Softether管理端安装与设置
1914 2
|
前端开发 JavaScript 开发工具
28款静态网站快速搭建生成器
28款静态网站快速搭建生成器
1998 0

热门文章

最新文章

下一篇
开通oss服务