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

相关文章
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
获取焦点后隐藏提示内容的输入框
获取焦点后隐藏提示内容的输入框
30 0
|
5月前
|
前端开发 定位技术
layer弹框右上角关闭按钮的样式
layer弹框右上角关闭按钮的样式
101 0
|
5月前
|
小程序 前端开发 JavaScript
小程序点击按钮出现和隐藏遮罩层
小程序点击按钮出现和隐藏遮罩层
155 0
|
17天前
|
JavaScript
vue中轻松搞掂鼠标气泡框提示框tip跟随
vue中轻松搞掂鼠标气泡框提示框tip跟随
|
3月前
|
前端开发 JavaScript 数据安全/隐私保护
前端点击其他输入框的时候,对当上个输入框进行判断(鼠标移出输入框事件,和鼠标点击其他输入框触发事件)
前端点击其他输入框的时候,对当上个输入框进行判断(鼠标移出输入框事件,和鼠标点击其他输入框触发事件)
43 0
|
9月前
|
JavaScript
原生js实现复选框选全部框与取消全选框
原生js实现复选框选全部框与取消全选框
39 0
|
10月前
|
前端开发 数据安全/隐私保护
网页|利用提示框(Tooltip)实现弹窗效果
网页|利用提示框(Tooltip)实现弹窗效果
141 0
|
10月前
|
前端开发 C# 数据安全/隐私保护
ApeForms | C# - WinForm临时对话框(消息框、提示框、输入框、密码框、单选框、多选框等)
ApeForms一款基于WinForm实现的开源免费商用的UI库,其中提供了一套便于用户交互的临时对话框组件(Dialog),可用于快速创建开发中常见的交互对话框,例如:消息框、提示框、输入框、单选框、多选框等。 ApeFree.ApeDialogs并不是一个包含Dialog实现的UI库,而是一套Dialog标准(提供了一套临时弹出对话框的实现标准)。 Dialog是界面开发过程中必不可少的组件,无论是桌面开发、Web前端开发、移动端开发,甚至命令行应用程序中的一次“Yes or No”的输入都可以看做是一次Dialog弹框。
373 0
ApeForms | C# - WinForm临时对话框(消息框、提示框、输入框、密码框、单选框、多选框等)
|
Web App开发 JavaScript 前端开发
对话框、模态框和弹出框看起来很相似,它们有何不同?
由于一个新的 popover 属性正在被提出,所以这篇文章将探讨对话框(dialogs)、弹出窗口(popovers)、叠加层(overlays)和揭示小部件(disclosure widgets)之间的区别。
26284 1
|
Android开发 UED
完美解决android软键盘挡住输入框方法,还不顶标题栏
完美解决android软键盘挡住输入框方法,还不顶标题栏
1149 0
完美解决android软键盘挡住输入框方法,还不顶标题栏