简述JS浏览器的三种弹窗

1.alert:使用alert弹框提示信息，最后都会被转化为字符串输出（因为调用了toString这个方法）。比如alert（1+1）弹出的结果应该是字符串形式的“2”。

2.Confirm:在alert基础上增加了让用户选择性的操作（提供两个按钮：确定和取消）

比如：var  delin = confirm(‘你确定要删除吗？');

这一句，当用户点击确定按钮的时候，我们接受到的结果是true,点击的是取消按钮的时候，我们接受到的结果是false,此后我们可以根据不同的结果做不同的处理即可。

3.Prompt:在confirm的基础上增加让用户输入的效果

比如var flag = prompt(‘请输入你想反馈的意见：');

当用户点击取消按钮，我们获取到的结果是null；如果用户点击确定按钮，我们获取到的是用户输入的内容。（如果用户没有输入任何内容，获取到的的结果是空字符串）

//但是真实的项目中，尤其是需要样式精美的网站中，我们的提示框一般都是自己封装插件和组件来实现，不会使用内置的这些方法（要使用原生JS封装模态框组件）

总结

以上所述是小编给大家介绍的JS浏览器的三种弹框，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • JS实现自定义弹窗功能

    众所周知,浏览器自带的原生弹窗很不美观,而且功能比较单一,绝大部分时候我们都会按照设计图自定义弹窗或者直接使用注入layer的弹窗等等.前段时间在 慕课网 上看到了一个自定义弹窗的实现,自己顺便就学习尝试写了下,下面是主要的实现代码并添加了比较详细的注释,分享出来供大家参考.(代码用了ES6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,后面有时间更新为一个兼容性较好的es5版本) HTML部分:(没什么内容 放置一个按钮调用函数,js中调用实例即可供参考) <!DOCTYPE html

  • Javascript中弹窗confirm与prompt的区别

    confirm 使用confirm,浏览器可以弹出一个确认框. 使用确认消息框可向用户问一个"是-或-否"问题,并且用户可以选择单击"确定"按钮或者单击"取消"按钮.confirm 方法的返回值为 true 或 false.该消息框也是模式对话框:用户必须在响应该对话框(单击一个按钮)将其关闭后,才能进行下一步操作. prompt  提示消息框提供了一个文本字段,用户可以在此字段输入一个答案来响应您的提示.该消息框有一个"确定"

  • javascript中常见的3种信息提示框(alert,prompt,confirm)

    1.警告提示框 alert("文本"). ex. function disp_alert() { alert("我是警告框!!"+'\n'+"hhah")//有折行 } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 2.确认提示框(confirm,返回true或者false) function show_confirm() { var r=confirm("Press a button!"); if (r==tr

  • JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: #000; position: absolute; left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.3; display: none; z-index: 2 "> </div> <!

  • JS中confirm,alert,prompt函数区别分析

    window.alert:参数,只有一个,显示警告框的信息; 无返回值. <script> window.alert("确定.") </script> window.confirm : 参数就只有一个.显示提示框的信息. 按确定,返回true; 按取消返回false. <script> var bln = window.confirm("确定吗?"); alert(bln) </script> window.promp

  • JS实现仿微信支付弹窗功能

    先奉上效果图 html代码 <!DOCTYPE html> <html> <head> <title>仿手机微信支付输入密码界面效果</title> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no"

  • javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)

    1.警告框alert() 复制代码 代码如下: alert("欢迎光临!"); 2.信息框confirm(),有取消,确定按钮 复制代码 代码如下: if (confirm("你同意吗?")) { alert("同意"); } else { alert("不同意"); } 3.提示框prompt(),用于提示用户输入一些文本 复制代码 代码如下: var result = prompt("您尊姓大名?",&

  • JS中confirm,alert,prompt函数使用区别分析

    window.alert:参数,只有一个,显示警告框的信息; 无返回值. <script> window.alert("确定.") </script> window.confirm : 参数就只有一个.显示提示框的信息. 按确定,返回true; 按取消返回false. <script> var bln = window.confirm("确定吗?"); alert(bln) </script> window.promp

  • JS封装的模仿qq右下角消息弹窗功能示例

    JS封装的模仿qq右下角消息弹窗功能示例

    本文实例讲述了JS封装的模仿qq右下角消息弹窗功能.分享给大家供大家参考,具体如下: 在我们的日常开发中,或者生活中,经常需要用到弹出窗.这里我们就用js模拟一下qq消息一样的弹出窗. 直接贴代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

  • JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例

    本文实例讲述了JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能.分享给大家供大家参考,具体如下: HTML部分: <div id="div">点击除开div的区域可以弹出弹窗</div> <div id="cover"></div> <div id="box">点击除开div和弹窗的区域可以关闭弹窗</div> CSS部分: #div{ /*设置z-index属性必须设置

随机推荐