js中弹框的三种方式

alert（），confirm（），prompt（）三种弹框的区别

JS中有三种弹框，主要是window的方法来实现与用户交互。
下面我们看一下他们的具体样子和区别

1.alert（）警告框

主要是通过弹出一句话来提示用户。用户只能点击确认。
形式为：alert（“文本”）或者alert（变量）。
无返回值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>alert("123");</script>
</body>
</html>

2.confirm（）确认框

主要用来提醒用户以及确定一下是否继续该操作。
形式：confirm(“文本”)
返回布尔值（若用户点击确认，则返回true，若点击取消，则返回false）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>var a = confirm("是否要继续操作?");console.log(a);</script>
</body>
</html>

3.prompt（）提示框

用户需要输入某个值点击确认或者取消之后才能继续操作。
形式：prompt（“文本值”，“默认值”）
返回文本输入域的值或者null（若点击取消，则返回null，若点击确认，则返回用户输入的值或者默认值）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>var a = prompt("请输入密码","123456");console.log(a);</script>
</body>
</html>

分为下面四种情况

直接点击确认，返回默认值
输入之后再确认，返回用户输入的值
若直接点击取消，则返回null
输入之后再点击取消，则返回null

js中弹框的三种方式相关推荐

java的如何创建js_[Java教程]JS创建事件的三种方式（实例）
[Java教程]JS创建事件的三种方式(实例) 0 2016-05-11 14:00:16 1.普通的定义方式 οnclick="Sfont=prompt('请在文本框中输入红色','红色' ...
js声明变量的三种方式
JS 声明变量的三种方式 (1)使用变量步骤:a.声明-->b.赋值-->3.调用正确用法: <script type="text/javascript"> ...
html confirm位置,js确认框confirm()三种使用方法
先为大家介绍javascript确认框的三种使用方法,具体内容如下第一种方法:挺好用的,确认以后才能打开下载地址页面.原理也比较清晰.主要用于删除单条信息确认. 调用方法: 第三种方法:主要用于批量 ...
原生JS事件绑定的三种方式
JavaScript绑定事件的方法要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定"事件处理函数".所谓事件处理函数,就是处理用户操作的函数,不同的 ...
js常见创建对象的三种方式
// 最常见的三种创建对象的方式// 1.字面量创建对象var o = {name:'jack'}// 2.通过Object创建对象var obj = new Object();obj.name = ...
深入理解pdf.js，PDFObject, iframe 三种方式来打开PDF文件的区别
浏览器原生就是支持打开PDF文件的. 所以使用iframe打开就相当于是使用浏览器自带的PDF插件打开,这个很好理解. 至于PDFObject,他是借助了embed这个标签,这个标签是什么概念? HT ...
JS实现复制功能的三种方式，有坑
简介业余时间写了一个在微信里面分享X宝优惠券的小工具,里面有用到复制淘口令的功能,当时以为实现起来很-简单,但是一不留神还是踩了个坑,接下来就给大家分享一下. 页面布局代码传送门:https://w ...
【JavaScript】原生js阻止事件的三种方式
三种阻止事件执行的方式 event.preventDefault() event.stopPropagation() return false 1.event.preventDefault() 阻止特 ...
JS中创建对象：三种方式（pink）
在 JavaScript 中,现阶段我们可以采用三种方式创建对象(object): (1)利用字面量创建对象 (2)利用new Object创建对象 (3)利用构造函数创建对象