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对象的功能及方法,能够加深我们对浏览器的理解。

相关文章
|
存储
uniApp监听左右滑动事件
uniApp监听左右滑动事件
1328 0
|
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/)深入学习。
686 0
|
前端开发 JavaScript 编译器
不走弯路,纯前端如何把图片导出成视频!
【10月更文挑战第3天】不走弯路,纯前端如何把图片导出成视频!
1098 3
|
人工智能 JSON API
Vue3通知提醒(Notification)
这是一个基于 Vue2 的通知提醒框组件,支持高度自定义设置,包括消息标题、自动关闭延时、弹出位置等。提供了五种样式:默认、信息、成功、警告和错误,并可通过不同方法调用以实现相应样式。组件还支持多种位置设置,如顶部左侧、顶部右侧、底部左侧和底部右侧,并允许调整与屏幕边缘的距离。
1053 3
Vue3通知提醒(Notification)
|
前端开发 JavaScript
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
本文介绍了如何在Vue3项目中实现一个鼠标拖动调整元素宽度的功能,并展示了点击按钮收起或展开侧边栏的效果,提供了完整的实现代码和操作演示。
2289 0
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
|
JavaScript
Vue2首页banner轮播
这篇文章介绍了如何在Vue 2框架中创建一个首页轮播图(Banner)组件,允许自定义轮播数据、切换间隔、宽度和高度,并提供了组件的实现代码和使用示例。
346 0
Vue2首页banner轮播
|
存储 索引 Python
元组和列表的区别?
【7月更文挑战第13天】元组和列表的区别?
1880 6
|
运维 Linux 数据安全/隐私保护
Softether详解(三)——Softether管理端安装与设置
Softether详解(三)——Softether管理端安装与设置
2104 2
|
关系型数据库 MySQL
清理MySQL的binlog日志
清理MySQL的binlog日志
2157 0

热门文章

最新文章